jQuery UIはマウスの移動にドラッグしてクリックすると移動する

Question

私は現在、ページが読み込まれるときに私はマウスに従うために押しピンが必要で、ユーザーがマウスをクリックすると、マウスカーソルがある場所に押しピンを置きます。私はjQuery UIでこれを行う方法を理解できません。私はいくつかの例をjQueryだけで調べましたが、ページ全体で作業することはできませんでした。誰かがこれをやっている経験があれば、私は助けていただければ幸いです。質問から

Answer 1

click上で新しい絶対のdivを作成し、単にそのDIV position:absoluteを作り、mousemove上に移動し、いくつかの画鋲背景に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/