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

终于用jqueryui搞定了。

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

jquery 创建圆圈并让它们移动

jquery creating circles and let them move

jquery

events

mousemove

mouseup

mousedown