'$' is undefined javascript error
<pre><code>&lt;script type="text/javascript"&gt;
    $(function() {
        $('#WaterMark').draggable(
                    {
                        start: function(e, ui) {
                        },
                        cursor: 'move',
                        zIndex: 2700,
                        revert: 'invalid',
                        containment: '#OriginalImageContainer'
                    });
        $('#OriginalImage').droppable({
            hoverClass: 'DroppableOver',
            drop: InitializeWaterMark
        })
    });

    var InitializeWaterMark = function() {
        var position = $('#WaterMark').position();
        var imgPosition = $('#OriginalImageContainer').position();
        document.getElementById('xpos').value = position.left - imgPosition.left;
        document.getElementById('ypos').value = position.top - imgPosition.top;

    }
    &lt;/script&gt;
</code></pre>

<p>this is a sample javascript code i got regarding drag and drop of images in a asp.net webpage...But it returns a error stating <strong>'$' is undefined</strong>..please help me out</p>
