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.