jquery 동그라미를 만들고 움직이자

Question

간단한 원을 그려 마우스 업, 마우스 다운 및 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 { 
 
\t display:inline-block; 
 
\t position:relative; 
 
\t border:1px solid black; 
 
\t width:500px; 
 
\t height: 500px; 
 
\t margin-right:10px; 
 
} 
 

 
.circle { 
 
\t border:1px solid red; 
 
\t border-radius:50%; 
 
\t width:20px; 
 
\t height:20px; 
 
\t 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'); 
});