jQuery UI鼠标拖动鼠标移动，单击鼠标拖放

我目前正在做一个项目，当页面加载时，我需要一个图钉跟随鼠标，当用户单击鼠标时，它会将图钉放置在鼠标光标所在的位置。我不知道如何使用jQueryUI实现这一点。我查看了一些仅在jQuery中完成的示例，但无法让它们处理整个页面。如果有人有这样做的经验，我将非常感谢您的帮助。

从问题中不清楚确切的问题是什么，但这样做应该很容易，只需创建一个带有图钉背景的

div

，使该div

位置：绝对
，然后将其移动到
mousemove
，在
上单击
创建一个具有相同背景的新绝对div，并将其放置在

html

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

和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)
        })
});

$（函数（）{
变量内容=$（“#内容”）
内容
.css（'光标'，'十字线'）
.bind（'mousemove.pushpin'，函数（e）{
$（'mousepin'）.css（{'left'：e.pageX-16，'top'：e.pageY-16}）
})
.bind（'click.pushpin'，函数（e）{
var newPin=$（''）
.css（{'left'：e.pageX，'top'：e.pageY}）
.附录（内容）
})
});

你可以在行动中看到它@

$(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)
        })
});