jquery creating circles and let them move

Question

I need to draw simple circles and move them using mouseup, mousedown and mousemove events.

The code I'm working in is the following:

$(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>

I have some problems to get the code working properly. I can put the red circles in the screen with mousedown/mouseup events or with mousedown-movemouse-mouseup. However, once a circle is placed and I want to move it, I mousedown and mousemove or mousedown mouseup and mousemove and the circle moves together with the mouse, but it is never placed again in the wrapper.

Any help or ideas please?

Thank you so much in advance.

Answer 1

I finally got it with 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');
});