使用不带可拖动的 jQuery 进行 Html 拖放答案

【问题标题】：Html Drag and Drop using jQuery w/out Draggable使用不带可拖动的 jQuery 进行 Html 拖放
【发布时间】：2012-01-10 15:05:00
【问题描述】：

任何人都可以发布一个使用 jQuery 而不使用可拖动行为的拖放实现的简约示例吗？据我了解，它不应超过 10 行。

我有以下 html：

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

我想让一个蓝色方块可以拖动。

我已经完成了我的实现，但它看起来相当可怕，所以我想从你们那里获得一些课程。

【问题讨论】：

标签： jquery html drag-and-drop

【解决方案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。

【讨论】：

尝试拖动并释放 - 然后再次拖动。它会产生不需要的粘性可拖动效果。同样对于大型可拖动对象（将可拖动大小更改为 50 x 50），当拖动操作不尊重实际拖动开始位置时，它看起来很丑。
@Dmitry - 正如我在回答中所说，它并不意味着完美，只是 OP 可以用来开始的基本起点。

【解决方案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/

【讨论】：

喜欢这种方法，但它在使用 jQuery 1.7.1 的 FF 中不起作用:( 它在 fiddler niether 中不起作用。
确认在 Chrome 中工作。我对 JS 不太了解 - 看不到你如何隐藏实际的鼠标指针 - 我可以让它一直可见吗？
@Dmitry FF 错误来自 offsetX/Y，我会改变它。关于光标，它没有隐藏，只是因为背景颜色不可见；）
谢谢。可以为FF修复吗？一直喜欢这项技术。
@Dmitry 解决了 FF 问题（顺便说一句，这是一个非常奇怪的问题）返回 false（停止事件冒泡）。希望对您有所帮助！