扩展jsplumb.draggable拖动行为

Question

我确信我在这里遗漏了一些东西,但是我想用附加到端点的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"));

这是我想要做的一个例子.我希望顶部框能够像底部一样读取拖动位置,但无法弄清楚如何破解拖动:jsPlumb.draggable中的函数.这里的绑定行为越来越近,但我想要定位附加到端点的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"));