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?

are you sure the selectors are correct ? `$('#flexwrap".$dynamiccounter."')` - dot is a php concatenation operator. — coding_idiot, Sep 23 '14 at 18:33
now that you say, sure it has to be a + but idk its working :/ but thats not the problem i have, but thx ;) — xQp, Sep 24 '14 at 07:37
:D of course it is right cause the whole script is set via echo so sure it has to be . totaly forgot — xQp, Sep 24 '14 at 07:52
would but since i get all my data from database, its not possible and way to long for jfiddle, BUT it shouldnt be necessary i just want to know i can get the x/y-Coordinates while and after Drag and Drop and set those to a Textfield of the current box dragged — xQp, Sep 25 '14 at 12:27
... the problem isnt getting the coordinates with jquery the problem i have is getting and USING them with jsPlumb, but thank you for that information — xQp, Sep 26 '14 at 13:27
http://jsfiddle.net/8jPLd/149/ there is your fiddle, how can a set x / y to the textfield while dnd with JSPLUMB — xQp, Sep 26 '14 at 13:37
if you use http://www.jsplumb.org/demo/flowchart/jquery.html and look at the Console while you drag an anchor and drop it at an endpoint it says: `connection con_39 is being dragged... ` or `connection con_39 was dragged` i want the same for the elements itself while beeing draged and dropped — xQp, Sep 26 '14 at 14:37

MrNobody007 · Accepted Answer · 2014-10-01T04:10:06.127

5

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.

edited Oct 01 '14 at 04:10

answered Oct 01 '14 at 03:59

MrNobody007

1,827
11
32

Just a one more NOTE: if we specify `jsPlumb.Defaults.Container = wrapper element` it starts work for children which has connections and instead of `repaint` we invoke `repaintEverything` function in `drag` callback. – Ashot Nov 23 '16 at 06:46

score 5 · Answer 2 · answered May 27 '15 at 14:59

5

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
            }
        });

    });
});

answered May 27 '15 at 14:59

Uriel

352
5
17

Good answer, using only jsPlumb (which can, now, work without jQuery). drag is called several times, during the drag operation, stop is called, of course, when dropping. Reference: https://jsplumbtoolkit.com/community/doc/dragging.html – PhiLho Feb 17 '16 at 12:32
More relevant link (included in the linked page above, more or less): https://github.com/jsplumb/katavorio/wiki -- There is also a start handler. – PhiLho Feb 17 '16 at 13:09

score 1 · Answer 3 · answered Mar 15 '15 at 15:54

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.

jsPlumb drag element position

3 Answers3