Get JQuery drag'n drop work between layout div


I need some help to make work properly the JQueryUI drag fonctionnality.

I’ve made a dhxWins, with two Tab (dhtmlXTabBar), and in the first tab, i use a Layout division (cells(“a1”).attachLayout(“2U”)), and finaly i attach a accordion menu (cells(“a”).attachAccordion()).

In one of accordion element, i have some draggable element, initialised after the load this JQueryUI.

My problem is i can’t drop element in the other layout divison.

You can see a screenshot in posted attachement.

Can tou help me ?


Are you using real div’s in layout or iframes with content from different pages? In second case dnd will not work for sure.


It’s real DIV, load after dhtmlx tabbar construction with ajax content.

Here is a sample of the widow code :



And then, use JS function to render the accordion :

[code]windowAppTab[divId] = new dhtmlXTabBar("a_tabbar_statsprod", "top");
windowAppTab[divId].addTab("a1", "Feuille de Calcul", "150px");
windowAppTab[divId].addTab("a2", "Prévisualisation", "150px");
windowAppTab[divId].setContent("a1", "html_1_tabbar_statsprod");
windowAppTab[divId].setContent("a2", "html_2_tabbar_statsprod");

windowAppLayout[divId] = windowAppTab[divId].cells("a1").attachLayout("2U");
windowAppLayout[divId].cells("b").attachHTMLString("<div id='tabbar_b' style='height:96%;overflow:auto;'></div>");	

windowAppAccord[divId] = windowAppLayout[divId].cells("a").attachAccordion();
windowAppAccord[divId].addItem("a1", "Champs sélectionnés");
windowAppAccord[divId].addItem("a2", "Palette");
windowAppAccord[divId].addItem("a3", "Modele de présentation");

windowAppAccord[divId].cells("a1").attachHTMLString("<div id='Menu1' style='height:96%;overflow:auto;'></div>");
windowAppAccord[divId].cells("a2").attachHTMLString("<div id='Menu2' style='height:96%;overflow:auto;'></div>");
windowAppAccord[divId].cells("a3").attachHTMLString("<div id='Menu3' style='height:96%;overflow:auto;'></div>");

xhr = new XHRConnection();
ajaxUrl = “module_statsprod/”;
xhr.appendData(“divId”, divId);
xhr1 = xhr;
xhr2 = xhr;
xhr3 = xhr;
//Here, i load the content of each accordion
setTimeout(‘ajaxChargementInDiv(xhr, ajaxUrl + “_menu.dataSelection.php”, “POST”, “Menu1”, “”)’, 600);
setTimeout(‘ajaxChargementInDiv(xhr1, ajaxUrl + “_menu.dataDisplay.php”, “POST”, “Menu2”, “setDraggableTdByClassName(‘draggable’);”)’, 800);
setTimeout(‘ajaxChargementInDiv(xhr2, ajaxUrl + “_menu.dataMode.php”, “POST”, “Menu3”, “”)’, 1000); [/code]


could you attach the completed sample (without servers-side scripts) ?

I can render the code like this :



Is it more understandable for you ?

here is what I meant by demo: … leted_demo


Happy new year to all !

And thanks to help me.

You can find in attachement the completed demo.

Completed (1.44 MB)


Happy New Year to you too )

We have checked your demo. The drag element (clone td) is not appended to document body, it is the child of the same parent as the element where drag is initiated. The position of the drag element is absolute and zIndex is big… however, if an element is inside the container with relative position (Layout cell has position:relative in style), it can not be dragged to another parent container. Try to make the “drag element” to be attached to document body. Possibly you could use our DataView and its drag out feature:

dhtmlxDataView/samples/05_drag-n-drop/06_drag_out.html … g_out.html

Ok, thanks, you’ve solved my problem.

I just add

, appendTo: 'body'

to the draggable element jquery.

I just need to build a custom helper, and add a droppable area.

Thanks again !