Question

我确信我在这里遗漏了一些内容，但我想扩展div的拖动行为，使用附加到端点的jsPlumb.draggable类属性，同时保留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。如果我覆盖拖动：功能，我将失去jsPlumb.draggable属性。在此先感谢您的帮助。

Answer 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
  }
);

Answer 2

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

$('#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"));

Answer 3

最好的方法是配置jsPlumb.Defaults的DragOptions。您必须指定drag功能：

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

Answer 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
  }
);

扩展jsplumb.draggable拖动行为

4 个答案: