Question

任何人都可以在不使用可拖动行为的情况下使用jQuery发布一个简单的drag'n'drop imeplementation示例吗？根据我的理解，它不应该超过10行。

我有以下html：

<div id="container" style="width:500px; height:500px;">
  <div id="draggable" style="width:10px; height:10px; background-color:blue;" />
</div>

我想制作一个蓝色方形可拖动。

我的实现工作正常，但它看起来很可怕，所以我想从你们那里得到一些课程。

Answer 1

我假设“没有Draggable”你的意思是没有jQuery UI。你可以这样做：

var dragging = false;
$("#draggable").mousedown(function() {
   dragging = true; 
}).mouseup(function() {
   dragging = false; 
});
$(document).mousemove(function(e) {
    if(dragging) {
        $("#draggable").css({left: e.pageX, top: e.pageY});  
    } 
});

它远非完美，但它应该足以让你开始。例如，它不会限制拖动到容器。

这是working example。

Answer 2

我就是这样做的：

$('#draggable').on('mousedown', function (evt) {
  var offset = {x: evt.offsetX || evt.originalEvent.layerX, y: evt.offsetY || evt.originalEvent.layerY};

  // bind mousemove only if dragging is actually happening
  $(document).on({
    // delegate the mousemove event to the draggable element
    'mousemove.drag': $.proxy(function(evt) {
      $(this).css({left: evt.pageX - offset.x, top: evt.pageY - offset.y});
    }, this),

    // unbind namespaced events on mouseup
    'mouseup.drag': function (evt) {
      $(document).off('.drag');
    }
  });

  return false;
});

演示：http://jsfiddle.net/sXahK/6/

使用不带Draggable的jQuery进行Html拖放

2 个答案: