``` #### Enable Drag and Drop ```html ``` #### Enable Drag and Drop ```html
Easy Tutorial
❮ Ext Datagridview Jeasyui Form Form2 ❯

jQuery EasyUI Extension - Drag and Drop Rows in TreeGrid

Usage

Include 'treegrid-dnd.js' File

<script type="text/javascript" src="treegrid-dnd.js"></script>

Enable Drag and Drop

&lt;table title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px"
        data-options="
            data: data,
            rownumbers: true,
            idField: 'id',
            treeField: 'name',
            onLoadSuccess: function(row){
                $(this).treegrid('enableDnd', row?row.id:null);
            }
        ">
    <thead>
        <tr>
            <th data-options="field:'name'" width="220">Name</th>
            <th data-options="field:'size'" width="150" align="right">Size</th>
            <th data-options="field:'date'" width="200">Modified Date</th>
        </tr>
    </thead>
</table>

Events

These events are extended from the TreeGrid and are added to the TreeGrid.

Name Parameters Description
onBeforeDrag row Triggered before a row starts dragging, returning false cancels the drag.
onStartDrag row Triggered when a row starts dragging.
onStopDrag row Triggered after a row stops dragging.
onDragEnter targetRow, sourceRow Triggered when a dragged row enters an allowed drop target, returning false cancels the drop.
onDragOver targetRow, sourceRow Triggered when a dragged row is over an allowed drop target, returning false cancels the drop.
onDragLeave targetRow, sourceRow Triggered when a dragged row leaves an allowed drop target.
onBeforeDrop targetRow, sourceRow, point Triggered before a row is dropped, returning false cancels the drop. <br>targetRow: The target row to drop. <br>sourceRow: The source row being dragged. <br>point: Indicates the drop position, possible values: 'append', 'top' or 'bottom'.
onDrop targetRow, sourceRow, point Triggered when a row is dropped. <br>targetRow: The target row to drop. <br>sourceRow: The source row being dragged. <br>point: Indicates the drop position, possible values: 'append', 'top' or 'bottom'.

Methods

These methods are extended from the TreeGrid.

Name Parameters Description
enableDnd id Enables drag and drop for rows. <br>'id' parameter indicates the row to be dragged and dropped. <br>If not specified, all rows can be dragged and dropped.

Download jQuery EasyUI Example

jquery-easyui-treegrid-dnd.zip

❮ Ext Datagridview Jeasyui Form Form2 ❯