jquery円を作成して移動させる

Question

シンプルな円を描き、mouseup、mousedown、mousemoveイベントを使用して移動する必要があります。

私が働いているコードは以下の通りです：

$(document).ready(function(){ 
 

 
    $(document).on('mousedown','#wrapper, .circle',function(e){ 
 
    var elem = $(this); 
 

 
    if(elem.hasClass('circle')){ 
 
     e.stopPropagation(); 
 
     var x = e.pageX; 
 
     var y = e.pageY; 
 
     var r = 20; 
 
     elem.css({'top':y-r,'left':x-r}); 
 
     elem.addClass('target'); 
 
     $('#wrapper').on('mousemove',function(f){ 
 
     var x = f.pageX; 
 
     var y = f.pageY; 
 
     var r = 20; 
 
     elem.css({'top':y-r,'left':x-r}); 
 
     }); 
 
    } 
 
    else{ 
 
     var punto = $('<div></div>').addClass('circle target'); 
 
     var x = e.pageX; 
 
     var y = e.pageY; 
 
     var r = 20; 
 

 
     $(this).append(punto); 
 
     punto.css({'top':y-r,'left':x-r}); 
 

 
     $('#wrapper').on('mousemove',function(e){ 
 
     var x = e.pageX; 
 
     var y = e.pageY; 
 
     var r = 20; 
 
     $('.target').css({'top':y-r,'left':x-r}); 
 
     }); 
 
    } 
 
    }); 
 

 
    $(document).on('mouseup','.target',function(e){ 
 
    var x = e.pageX; 
 
    var y = e.pageY; 
 
    var r = 20; 
 
    $(this).css({'top':y-r,'left':x-r}); 
 
    $('.target').removeClass('target').off('mousemove'); 
 
    }); 
 

 

 

 

 

 
});

#wrapper { 
 
\t display:inline-block; 
 
\t position:relative; 
 
\t border:1px solid black; 
 
\t width:500px; 
 
\t height: 500px; 
 
\t margin-right:10px; 
 
} 
 

 
.circle { 
 
\t border:1px solid red; 
 
\t border-radius:50%; 
 
\t width:20px; 
 
\t height:20px; 
 
\t position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"></div>

私が正常に動作するコードを取得するには、いくつかの問題を抱えています。 mousedown/mouseupイベントやmousedown-movemouse-mouseupを使って、画面に赤い円を置くことができます。 しかし、一度サークルを配置し、それを移動したい場合、私はマウスとマウスマウスまたはマウスマウスとマウスマウスを動かし、マウスは一緒に動きますが、再度ラッパーに置かれることはありません。

お願いします。

ありがとうございます。

Answer 1

私はついにjquery uiでそれを手に入れました。

function enableMovement(){ 
    $('.circle').draggable(); 
} 

$(document).on('mousedown','#wrapper',function(e){ 
    var circle = $('<div></div>').addClass('circle target'); 
    var x = e.pageX; 
    var y = e.pageY; 
    var r = 20; 

    $(this).append(circle); 
    circle.css({'top':y-r,'left':x-r}); 
    enableMovement(); 
}); 

$(document).on('mousedown','.circle',function(e){ 
    e.stopPropagation(); 
}); 

$(document).on('mousemove','#wrapper, .circle',function(e){ 
    var x = e.pageX; 
    var y = e.pageY; 
    var r = 20; 
    $('.target').css({'top':y-r,'left':x-r}); 
}); 

$(document).on('mouseup','.target',function(e){ 
    var x = e.pageX; 
    var y = e.pageY; 
    var r = 20; 
    $('.target').css({'top':y-r,'left':x-r}); 
    $('.target').removeClass('target').off('mousemove'); 
});