Search code examples
jquerydrag-and-dropmultiple-instancesjsplumb

jsPlumb multiple instances dnd bug


im using jsPlumb with multiple instances in one Overview, all created dynamicly.

Its way to mutch code to post it in here und as it is dynamicly generated from mySQL i cant generate a fiddle.

But maybe someone has had that problem before and knows where that bug is created or what should i check once again.

The Error:
All is displayed well and all connectors and anchors are showen correctly,
Drag and Drop is working BUT only at the last instance ( DIV )

If i try to Drag an element from the first it automaticly disappears and appears at the last instance-DIV.

Where could i try to find the mistake?

Thank you so far
Greetings


Solution

  • Ok i solved it,

    my problem was, i used this code:

    $(".dragndrop").draggable({
                                            drag:function(e){
                                                // Your code comes here
                                                instance'.$dynamiccounter.'.repaint($(this));
    
                                            },
                                            stop: function(e){
                                                // Your code for capturing dragged element position.
                                                var id = this.id;
                                                id = id.replace("flowchartdrag", "");             
                                                var x = "x" + id;
                                                var y = "y" + id;
                                                var parentLeft = $("#flexwrap'.$dynamiccounter.'").position().left;
                                                var parentTop = $("#flexwrap'.$dynamiccounter.'").position().top;
                                                var offset = $(this).position();
                                                document.getElementById(x).value=(offset.left - parentLeft);
                                                document.getElementById(y).value=(offset.top - parentTop );
                                                 instance'.$dynamiccounter.'.repaintEverything();
                                            },
                                            containment: $("#flexwrap'.$dynamiccounter.'")
                                        });
    

    since all Elements used the same CSS Class, all of them were load into both of them So i needed to seperate them by using the same dynamiccounter

    $(".dragable'.$dynamiccounter.'").draggable({
                                            drag:function(e){
                                                ...
                                                ...
                                            },
                                            containment: $("#flexwrap'.$dynamiccounter.'")
                                        });
    

    Now all works as it should ;)