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将红色圆圈放在屏幕上。然而，一旦放置了一个圆圈并且我想要移动它，我将鼠标移动并移动鼠标或鼠标移动鼠标移动并且圆圈与鼠标一起移动，但它永远不会再次放置在包装器中。

有任何帮助或想法吗？

提前非常感谢你。

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

jquery创建圈子让他们移动

1 个答案: