положение элемента перетаскивания jsPlumb

Im использует jsPlumb с jQuery

Мне было интересно, есть ли способ получить положение элемента во время и после перетаскивания его в контейнер?

Я делаю кроссовер в данный момент, который работает, но не перекрашивает мои точки соединения и якоря, прежде чем я сохраню позицию.

<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 для текстовых полей элементов, чтобы сохранить позицию в базе данных?

3 4
jquery drag-and-drop css-position

3 ответа:

Вы можете получить положение DIV из функции перетаскивания jQuery, в то же время вам нужно перерисовать соединение перетаскиваемого элемента следующим образом: 

$('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

Примечание: приведенный выше код будет только перерисовывать перетаскиваемый элемент. Если дочерний элемент перетаскиваемого элемента также имеет соединение, то он не будет работать для них.

4

Точно так же, как ответ Alemv, но менее конкретный (работает для всех случаев) и использует демо jPlumb: 

jsPlumb.ready(function () {
    //....
    instance.batch(function () {
        //...
        divsWithWindowClass = jsPlumb.getSelector(".window");

        //...
        instance.draggable(divsWithWindowClass, {
            drag: function() {
                // Your code
            },
            stop: function(event, ui) {
                // Your code
            }
        });

    });
});
3

Вы можете добавить jQueryUI draggable к вашим элементам jsPlumb следующим образом: 

instance'.$dynamiccounter.'.draggable(jsPlumb.getSelector("#flexcontent'.$dynamiccounter.' .dragable"), {
        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.draggable передается через jQueryUI draggable. Таким образом, в функции перетаскивания здесь нет необходимости jsPlumb.repaint.

1