Geek Answers Handbook

JsPlumb drag element position

im using jsPlumb with jQuery

I was wondering if there is a way to get the position of an element during and after dragging it into the container?

im does the crossover the moment it works, but does not redraw my join and anchor points before I keep 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 tried to use

    jsPlumb.repaint;

but it does not work

this is how i could create draggable elements using jsPlumb

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

but how can I set the x / y coordinates for the text fields of the elements to keep the position in the database?

+4
source share
3 answers

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

, , ( ) jPlumb demos:

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, 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

More articles:


All Articles