jQuery UI拖动鼠标移动和点击下降

问题描述：

我目前正在一个项目中，当页面加载时，我需要一个图钉来跟随鼠标，当用户点击鼠标时，它将图钉放在鼠标光标所在的位置。我无法弄清楚如何用jQuery UI做到这一点。我看了一些仅仅使用jQuery完成的示例，但无法让它们在整个页面中工作。如果有人有这样的经验，我会很感激帮助。jQuery UI拖动鼠标移动和点击下降

答

从问题目前尚不清楚是什么确切的问题，但这样做应该很容易，只需创建一些图钉背景div，使该分区position:absolute并将其移动mousemove，在click创建一个新的绝对DIV相同的背景和地方，例如

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

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

你可以看到它在行动@http://jsfiddle.net/anuraguniyal/uUGsH/embedded/result/

jQuery UI拖动鼠标移动和点击下降

相关推荐