jquery로 유연한 드래그/드롭 (예 : javascript)

나는 this drag/drop javascript example이 jquery에서 어떻게 수행되는지 이해하려고합니다. jquery 버전이 더 깨끗하고 효율적이며 이해하기 쉽다고 생각합니다.jquery로 유연한 드래그/드롭 (예 : javascript)

출처

2010-08-20 Berming

U 여기에 게시하기 전에 구글을 사용해야합니다. 단순히 "jquery 끌어서 놓기"는 첫 번째 결과를 제공합니다. 이것을 확인해보십시오. http://bit.ly/bAIcEz –

@piemesons, * should be Google을 사용해야합니다 ... 그러나 Google 검색을위한 가치있는 질문은 여기에서 물어볼 가치가 있습니다. =) –

이것은 jQuery UI를 사용하여 수행하는 방법입니다. 당신은 또한 position: absolute로 .draggable 스타일 한 가정 :

는

var $draggable = null, startX, startY; 

$('.draggable').live('mousedown', function(ev) { 
    $draggable = $(this); 
    var pos = $draggable.position(); 
    startX = ev.pageX - pos.left; 
    startY = ev.pageY - pos.top; 
    return false; 
}); 

$(document).bind('mousemove', function(ev) { 
    if ($draggable) { 
     $draggable.css({ left: ev.pageX - startX, top: ev.pageY - startY}); 
     return false; 
    } 
}); 

$(document).bind('mouseup', function(ev) { 
    if ($draggable) { 
     $draggable = null; 
     return false; 
    } 
});

출처

2010-08-20 20:01:11