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 {
	display:inline-block;
	position:relative;
	border:1px solid black;
	width:500px;
	height: 500px;
	margin-right:10px;
}

.circle {
	border:1px solid red;
	border-radius:50%;
	width:20px;
	height:20px;
	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 将红色圆圈放在屏幕上。 但是，一旦放置了一个圆圈并且我想移动它，我将 mousedown 和 mousemove 或 mousedown mouseup 和 mousemove 并且圆圈与鼠标一起移动，但它永远不会再次放置在包装器中。

请问有什么帮助或想法吗？

非常感谢您。

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