jsPlumb drag element position

Question

im using jsPlumb with jQuery

i was wondering if there is a way to get the position of an element while and after drag and drop it within the container?

im doing a crossover at the moment wich is working, but does not repaint my connectionpoints and anchors before i save the position.

<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."')
    });
});

i tryed to use

    jsPlumb.repaint;

but thats not working

that is how i would create draggable elements with jsPlumb

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

but how can i set x / y coordinates to the elements textfields to save the position into database?

Answer 1

You can get position of DIV's from jQuery drag function at the same time you need to repaint the connection of the element being dragged as:

$('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.
    }
})

Updated JSFIDDLE

NOTE: The above code will only repaint the dragged element. If the dragged element child also has connection then it wont work for them.

Answer 2

Just like Alemv's answer, but less specific (working for all cases), and using jPlumb's demos:

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

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

    });
});

Answer 3

You can add jQueryUI draggable to your jsPlumb elements like that:

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."')
});

The second parameter of jsPlumb.draggable is passed through to jQueryUI draggable. So there is no needed jsPlumb.repaint in the drag function here.