扩展 jsplumb.draggable 拖动行为答案

【问题标题】：Extend jsplumb.draggable drag behavior扩展 jsplumb.draggable 拖动行为
【发布时间】：2013-12-28 20:12:38
【问题描述】：

我确定我在这里遗漏了一些东西，但我想使用附加到端点的 jsPlumb.draggable 类属性来扩展 div 的拖动行为，同时保留 jsPlumb.draggable 属性。

我想要这样的东西（改编自SO）：

$('#dragcodes').draggable(
    {
        drag: function(){
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        console.log('x: ' + xPos);
        console.log('y: ' + yPos);
    }
});

在使用以下方法创建的元素上：

jsPlumb.draggable($(".dragcodes"));

这是我正在尝试做的example。我希望顶部框能像底部一样读取拖动位置，但无法弄清楚如何破解拖动：jsPlumb.draggable 中的函数。绑定行为here 越来越接近，但我想定位附加到端点的 div。如果我覆盖了 drag: 功能，我会丢失 jsPlumb.draggable 属性。提前感谢您的帮助。

【问题讨论】：

标签： javascript jquery jquery-ui jsplumb

【解决方案1】：

在 1.6.3 版中，以下代码有效：

jsPlumb.draggable("#dragcodes", {
  drag: function (event, ui) { //gets called on every drag
    console.log(ui.position);  //ui.position.left and ui.position.top
  }
});

【讨论】：

好电话。这是一个更好的解决方案恕我直言。这也适用于 1.5.5
遗憾的是，这似乎不再起作用：ui 未定义。版本 1.7.10

【解决方案2】：

jsPlumb.draggable 有助于在拖动时更新 DOM 元素。相反，您可以在 jQuery 中编写可拖动的代码：

$('#dragcodes').draggable(
{
    drag: function(){
    jsPlumb.repaint($(this)); // (or) jsPlumb.repaintEverything(); to repaint the connections and endpoints
    //followed by your code
    var offset = $(this).offset();
    var xPos = offset.left;
    var yPos = offset.top;
    console.log('x: ' + xPos);
    console.log('y: ' + yPos);
}
});

现在不需要jsPlumb.draggable($(".dragcodes"));

【讨论】：

感谢 Pruthvi，这正是我想要的。
实际上，如果您有很多元素，此解决方案会导致性能下降

【解决方案3】：

最好的办法是配置DragOptions 的jsPlumb.Defaults。你必须指定drag函数：

jsPlumb.getInstance({
....,
DragOptions: {
  drag: function() {
  }
},
....
);

【讨论】：

【解决方案4】：

JsPlumb 2.1.4 版

jsPlumb.draggable("#yourElement", {
  drag: function (event) {
    console.log(event.pos[0]); // for left position
    console.log(event.pos[1]); // for top position
  }
);

或者

jsPlumb.draggable("#yourElement", {
  drag: function (event) {
    $(event.el).position().left; // for left position
    $(event.el).position().top; // for top position
  }
);

【讨论】：