jquery - jsPlumb拖动元素位置

Question

我使用 jsPlumb 和 jQuery

我想知道是否有一种方法可以在将元素拖放到容器内时和之后获取该元素的位置？

我现在正在做一个交叉，正在工作， 但在保存位置之前不会重新绘制我的连接点和 anchor 。

<script type='text/javascript'>
$(window).load(function(){
    $('#flowchartdrag".$id_kurs."').draggable({
        drag: function() {
            var parentLeft = $('#flexwrap".$dynamiccounter."').position().left;
            var parentTop = $('#flexwrap".$dynamiccounter."').position().top;
            var offset = $(this).position();
            var xPos = (offset.left - parentLeft);
            var yPos = (offset.top - parentTop );
            $('#x".$id_kurs."').val(xPos);
            $('#y".$id_kurs."').val(yPos);

        },
        stop: function(event, ui) {
            // Show dropped position.
            var parentLeft = $('#flexwrap".$dynamiccounter."').position().left;
            var parentTop = $('#flexwrap".$dynamiccounter."').position().top;
            var Stoppos = $(this).position();
            var left = (Stoppos.left - parentLeft);
            var top = (Stoppos.top - parentTop);
            $('#x".$id_kurs."').val(left);
            $('#y".$id_kurs."').val(top);
        },
        containment: $('#flexwrap".$dynamiccounter."')
    });
});

我尝试使用

    jsPlumb.repaint;

但这不起作用

这就是我使用 jsPlumb 创建可拖动元素的方式

instance'.$dynamiccounter.'.draggable(jsPlumb.getSelector("#flexcontent'.$dynamiccounter.' .dragable"));

但是我如何设置元素文本字段的 x/y 坐标以将位置保存到数据库中？

Answer 1

您可以从 jQuery 拖动函数获取 DIV 的位置，同时您需要重新绘制被拖动元素的连接:

$('SELECTOR').draggable({
    containment: $('PARENT_SELECTOR'),
    drag:function(e){
        // Your code comes here
        jsPlumb.repaint($(this)); // Note that it will only repaint the dragged element
    },
    stop: function(e){
        // Your code for capturing dragged element position.
    }
})

已更新 JSFIDDLE

注意:上面的代码只会重新绘制拖动的元素。如果拖动的元素子元素也有连接，那么它对它们不起作用。