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的用户界面。

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