jQuery的拖放

Question

$（文件）。就緒（函數（）{

  $("#dvv").mousedown(function() { 

       $("#dvv").mousemove(function(e) { 

        $("#dvv").css({ 'margin-top': e.pageY - 15, 'margin-left': e.pageX - 15 }); 

       }); 

      }); 

<div id="dvv" style="background-color: Blue; width: 150px; height: 150px; margin: 250px 550px; 
     cursor: move;"> 
     test Div 
    </div> 

事業部點擊拖動不停幫我

Answer 1

請注意：我從來沒有嘗試之前實現這一點，但是這似乎是一個開始

。

請注意，我從你的div中刪除了邊距，並添加了絕對定位，所以它不是你開始使用的原始元素。

希望這會給你一些工作。

更新：只是改變了一下。現在，使用偏移（座標）而不是css，它可以工作，不管邊距設置如何，絕對定位不需要設置。

<div id="dvv" style="background-color: Blue; width: 150px; height: 150px; margin: 0; cursor: move;"> 
test Div 
</div> 

$("#dvv").mousemove(function(e) { 
    if($(this).hasClass('moving')) { 
     $(this).offset({ 'top': (e.pageY - $(this).data('offsety')), 'left': (e.pageX - $(this).data('offsetx')) }); 
    } 
}); 

$("#dvv").mousedown(function(event) { 
    $(this).data('offsetx', (event.pageX - $(this).offset().left)); 
    $(this).data('offsety', (event.pageY - $(this).offset().top)); 
    $(this).addClass('moving') 

}); 

$("#dvv").mouseup(function() { 
    $(this).removeClass('moving') 
}); 

Answer 2

退房jQueryUI的，它有一個 「draggable」 和 「droppable」組件，將讓你用大量的實例去