Drag-and-drop events
The sample below allows you to see which event are called during drag-n-drop operation.
Allow drag-and-drop (used by onDrag event)
Allow landing
The sample below allows you to see which event are called during drag-n-drop operation.
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css"> <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxgrid_dhx_skyblue.css"> <script src="../../codebase/dhtmlxcommon.js"></script> <script src="../../codebase/dhtmlxgrid.js"></script> <script src="../../codebase/ext/dhtmlxgrid_drag.js"></script> <script src="../../codebase/dhtmlxgridcell.js"></script> <table style="width:775px"> <tr> <td valign="top" width="600px"> <div id="gridbox" style="width:100%;height:270px;background-color:white;"></div> </td> <td width="15px"></td> <td valign="top" width="150px"> <div style="height:270px; overflow:auto;" id="logBox"></div> </td> </tr> </table> <div><input type='checkbox' checked="checked" id='allow_dnd' />Allow drag-and-drop (used by onDrag event)</div> <div><input type='checkbox' checked="checked" id='allow_landing' />Allow landing</div> <script></script>function drag_f(r1, r2) { document.getElementById("logBox").innerHTML += "Item <b>" + r1 + "</b> draged on item <b>" + r2 + "</b><br/>"; return document.getElementById("allow_dnd").checked; } function drag_in(r1, r2) { document.getElementById("logBox").innerHTML += "Item <b>" + r1 + "</b> draged over <b>" + r2 + "</b><br/>"; return document.getElementById("allow_landing").checked; } function drop_f(r1, r2) { document.getElementById("logBox").innerHTML += "Item <b>" + r1 + "</b> droped on item <b>" + r2 + "</b><br/>"; } var mygrid = new dhtmlXGridObject('gridbox'); mygrid.setImagePath("../../codebase/imgs/"); mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication"); mygrid.setInitWidths("50,150,100,80,80,80,80,200"); mygrid.setColAlign("right,left,left,right,center,left,center,center"); mygrid.setColTypes("dyn,ed,ed,price,ch,co,ra,ro"); mygrid.setColSorting("int,str,str,int,str,str,str,date"); mygrid.enableMultiselect(true); mygrid.init(); mygrid.enableDragAndDrop(true); mygrid.attachEvent("onDrag", drag_f); mygrid.attachEvent("onDragIn", drag_in); mygrid.attachEvent("onDrop", drop_f); mygrid.setSkin("dhx_skyblue"); mygrid.loadXML("../common/grid.xml");