jsPlumb多个实例和bug

时间:2014-12-12 10:53:49

标签: jquery drag-and-drop multiple-instances jsplumb

我在一个概述中使用jsPlumb和多个实例,所有实例都是动态创建的。

它可以通过mutch代码将其发布在这里,因为它是从mySQL动态生成的,但我无法生成小提琴。

但也许有人之前遇到过这个问题并知道该错误的创建地点或我应该再次检查一下。

错误:
全部显示良好,所有连接器和固定器都正确显示,
拖放工作仅在最后一个实例(DIV)

如果我尝试从第一个元素拖动元素,它会自动消失并显示在最后一个实例-DIV上。

我可以在哪里找到错误?

到目前为止,谢谢你 问候

1 个答案:

答案 0 :(得分:1)

好的,我解决了,

我的问题是,我使用了这段代码:

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

由于所有Elements都使用相同的CSS类,因此所有这些都加载到它们中 所以我需要使用相同的动态计数器来分隔它们

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

现在一切正常;)