扩展jsplumb.draggable拖动行为 [英] Extend jsplumb.draggable drag behavior

问题描述

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

I am sure that I am missing something here, but I would like to extend the drag behavior of a div with jsPlumb.draggable class attributes that is attached to an endpoint, while preserving the jsPlumb.draggable attributes.

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

I would like something like this (adapted from this 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);
    }
});

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

on an element that is created using:

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

这是示例我正在尝试做什么。我希望顶部框能够像底部一样读取拖动位置，但无法弄清楚如何破解拖动：jsPlumb.draggable中的函数。 这里的绑定行为越来越接近，但我想将目标定位为附加到端点。如果我覆盖拖动：功能，我将失去jsPlumb.draggable属性。在此先感谢您的帮助。

Here is an example of what I am trying to do. I want the top box to read the position out on drag like the bottom one is, but cannot figure out how to hack the drag: function in jsPlumb.draggable. The binding behavior here is getting close, but I want to target the div that is attached to the endpoint. If I override the drag: functionality, I lose the jsPlumb.draggable attributes. Thanks in advance for your help.

推荐答案

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

jsPlumb.draggable helps to update the DOM element whenever it is dragged. Instead you can write that code in jQuery draggable as:

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

这篇关于扩展jsplumb.draggable拖动行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！