jQuery UI drag on mouse move and drop on click

I'm c开发者_运维问答urrently working on a project where when the page loads i need a pushpin to follow the mouse and when the user clicks mouse, it places pushpin where mouse cursor is. I can't figure out how to do this with jQuery UI. I looked at some examples done in just jQuery but couldn't get them working with the whole page. If anyone has any experience doing this I would appreciate the help.

From question it is not clear what is the exact problem, but doing this should be easy, simply create a div with some pushpin background, make that div position:absolute and move it on mousemove, on click create a new absolute div with same background and place it e.g.

html

<div id="content">
<div id="mousepin" class="pushpin" />
</div>

css

.pushpin{
    background-image: url(http://maps.gstatic.com/mapfiles/ms2/micons/grn-pushpin.png); 
    width:32px;
    height:32px;
    position: absolute;
}

#content{
    background-color:#ffefff; 
    width:100%;
    height:500px;
}

and javascript

$(function(){

    var content = $('#content')

    content
        .css('cursor','crosshair')
        .bind('mousemove.pushpin', function(e){
            $('#mousepin').css({'left':e.pageX-16, 'top':e.pageY-16})
        })
        .bind('click.pushpin', function(e){
            var newPin = $('<div class="pushpin" />')
                .css({'left':e.pageX, 'top':e.pageY})
                .appendTo(content)
        })
});

You can see it in action @ http://jsfiddle.net/anuraguniyal/uUGsH/embedded/result/