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”组件，将让你用大量的实例去