jquery создает круги и позволяет им двигаться

Мне нужно рисовать простые круги и перемещать их с помощью событий 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. Однако, как только круг помещен и я хочу его переместить, я нажимаю и перемещаю мышь или перемещаю мышь и перемещаю мышь, и круг перемещается вместе с мышью, но он никогда больше не помещается в оболочку.

Любая помощь или идеи, пожалуйста?

Огромное спасибо заранее.


events jquery mousemove mouseup mousedown
person cooper    schedule 08.10.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Наконец-то я получил это с 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');
});
person cooper    schedule 08.10.2017