jQueryUI - 可通过单独的单击拖放来拖动答案

【问题标题】：jQueryUI - draggable with a separate click to dropjQueryUI - 可通过单独的单击拖放来拖动
【发布时间】：2012-01-09 01:55:15
【问题描述】：

我已经使用 jQueryUI 可拖放实现了拖放 OK。

对于不太懂行的用户，我还想提供一个可见的“移动”按钮。当他们单击此按钮时，该元素将被拾起，当他们再次单击放置目标时，该元素将被放置。所以和拖放一样，只是一键开始，一键放下。

我知道使用单独的代码可以做到这一点，但我宁愿不要为了细微的变化而重新发明一切。有没有办法让 jQueryUI 做到这一点？

我发现的唯一的事情就是调用draggable的触发方法，但是你必须传递一个mousedown事件......

谢谢

【问题讨论】：

标签： jquery-ui drag-and-drop

【解决方案1】：

在this other question 上查看我的回答。如果你改变它而不是

$("#headerDiv")
  .mousedown(function(event) {
    x = event.pageX;
    y = event.pageY;
    $(this).parent().addClass('movable');
  })
  .mouseup(function() {
    $(this).parent().removeClass('movable');
  });

绑定到click 并实现一个切换机制来决定您是开始拖动（等效于mousedown）还是结束拖动（等效于mouseup），您应该大部分时间都在那里。

【讨论】：

对不起，如果我没有正确理解你。但我不明白这如何让我重用 jQueryUI 拖放支持 - 我只是在做一个全新的机制......
原来可拖动的项目太多，性能不好；因此，在 IE8 和 Chrome 上，可拖动的 jQueryUI 的设置时间都令人望而却步。相反，我只更改为显式的“移动”按钮机制，所以做一些你们讨论的事情。感谢您的帮助。

【解决方案2】：

我会使用 .animate 将对象设置为动画到它的目标。我以前用游戏做过这个。例如，您可以指定要移动到按钮的 onClick 的元素的顶部和左侧坐标。

【讨论】：