Extended drag-n-drop
Try to move rows from one grid to another and you will see special signs with the cursor:
- allowed/denied drag-and-drop
- how many rows (top nodes for treegrid) you are dragging
Allow mercy drag-and-drop | Allow mercy drag-and-drop |
Try to move rows from one grid to another and you will see special signs with the cursor:
Allow mercy drag-and-drop | Allow mercy drag-and-drop |
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css"> <link rel="STYLESHEET" type="text/css" href="../../codebase/ext/dhtmlx_extdrag.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_splt.js"></script> <script src="../../codebase/ext/dhtmlxgrid_drag.js"></script> <script src="../../codebase/dhtmlxgridcell.js"></script> <script src="../../../dhtmlxTreeGrid/codebase/dhtmlxtreegrid.js"></script> <script src="../../codebase/ext/dhtmlxgrid_math.js"></script> <script src="../../codebase/ext/dhtmlx_extdrag.js" type="text/javascript"></script> <style> .dragAccessD{ background-image:url(../../codebase/imgs/false.gif); width:22px; height:22px; } .dragAccessA{ width:22px; height:22px; background-image:url(../../codebase/imgs/true.gif); } </style> <table> <tr> <td valign="top"> <div id="gridbox" style="width:600px; height:270px; background-color:white;"></div> </td> <td width="20px"></td> <td valign="top"> <div id="gridbox1" style="width:410px; height:270px; background-color:white;"></div> </td> </tr> <tr> <td valign="top"> <input type='checkbox' checked="checked" onclick='mygrid.enableMercyDrag(this.checked)' />Allow mercy drag-and-drop </td> <td width="20px"></td> <td valign="top"> <input type='checkbox' checked="checked" onclick='mygrid2.enableMercyDrag(this.checked)' /> Allow mercy drag-and-drop </td> </tr> </table> <script></script>function buildGrid() { dhtmlx.image_path = "../../codebase/imgs/"; mygrid = new dhtmlXGridObject('gridbox'); mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication"); mygrid.setInitWidths("50,150,120,80,80,80,80,200"); mygrid.setColAlign("right,left,left,right,center,left,center,center"); mygrid.setColTypes("dyn,ed,ed,price,ch,coro,ra,ro"); mygrid.setColSorting("int,str,str,int,str,str,str,str"); mygrid.enableMercyDrag(true); mygrid.enableDragAndDrop(true); mygrid.enableMultiselect(true); mygrid.init(); mygrid.setSkin("dhx_skyblue"); mygrid.loadXML("../common/grid.xml"); mygrid2 = new dhtmlXGridObject('gridbox1'); mygrid2.setHeader("Sales,Book Title,Author,Price"); mygrid2.setInitWidths("50,150,120,80"); mygrid2.setColAlign("right,left,left,right"); mygrid2.setColTypes("dyn,ed,ed,price"); mygrid2.setColSorting("int,str,str,int"); mygrid2.enableMercyDrag(true); mygrid2.enableDragAndDrop(true); mygrid2.enableMultiselect(true); mygrid2.init(); mygrid2.setSkin("dhx_skyblue"); mygrid2.loadXML("../common/grid.xml"); }