### Drag and Drop Rows in DataGrid（可拖放行的数据表格） [Extension](http://www.jeasyui.com/extension/index.php) ? Drag and Drop Rows in DataGrid **扩展下载地址：**[**http://www.jeasyui.com/extension/downloads/datagrid-dnd.zip**](http://www.jeasyui.com/extension/downloads/datagrid-dnd.zip)** ****(我发布的程序包整也有提供，在extension目录下)**  #### 导入'datagrid-dnd.js'文件 ~~~ <script type="text/javascript" src="datagrid-dnd.js"></script>   <script type="text/javascript" src="datagrid-dnd.js"></script> ~~~ ~~~   ~~~ #### 启用拖放 ~~~ <table class="easyui-datagrid" title="DataGrid" style="width:700px;height:250px" data-options="            singleSelect:true,            data:data,            onLoadSuccess:function(){                $(this).datagrid('enableDnd');            }        ">    <thead>        <tr>            <th data-options="field:'itemid',width:80">项目 ID</th>            <th data-options="field:'productid',width:100">产品</th>            <th data-options="field:'listprice',width:80,align:'right'">价格表</th>            <th data-options="field:'unitcost',width:80,align:'right'">单位成本</th>            <th data-options="field:'attr1',width:250">特性</th>            <th data-options="field:'status',width:60,align:'center'">状态</th>        </tr>    </thead></table> <table class="easyui-datagrid" title="DataGrid" style="width:700px;height:250px" data-options=" singleSelect:true, data:data, onLoadSuccess:function(){ $(this).datagrid('enableDnd'); } "> <thead> <tr> <th data-options="field:'itemid',width:80">Item ID</th> <th data-options="field:'productid',width:100">Product</th> <th data-options="field:'listprice',width:80,align:'right'">List Price</th> <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th> <th data-options="field:'attr1',width:250">Attribute</th> <th data-options="field:'status',width:60,align:'center'">Status</th> </tr> </thead> </table> ~~~ #### 事件 下列事件扩展自Datagrid，以下是新增的事件。 <table class="doc-table"><tbody><tr><th><strong>事件名</strong></th> <th><strong>参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>onBeforeDrag</td> <td>row</td> <td>在行开始拖动之前触发，返回false拒绝拖动。</td></tr><tr><td>onStartDrag</td> <td>row</td> <td>在开始拖动行的时候触发。</td></tr><tr><td>onStopDrag</td> <td>row</td> <td>在停止拖动行的时候触发。</td></tr><tr><td>onDragEnter</td> <td>targetRow, sourceRow</td> <td>在行被拖动到目标行内触发，返回false拒绝拖动。</td></tr><tr><td>onDragOver</td> <td>targetRow, sourceRow</td> <td>在行悬停在目标行内时触发，返回false拒绝拖动。</td></tr><tr><td>onDragLeave</td> <td>targetRow, sourceRow</td> <td>在行被拖动到目标行内触发。</td></tr><tr><td>onBeforeDrop</td> <td>targetRow,sourceRow,point</td> <td>在行被释放前触发，返回false拒绝释放。<br/>targetRow：要释放的目标行。<br/>sourceRow：被拖动的原始行。<br/>point： 指明拖放操作，可用值有：'top','bottom'。</td></tr><tr><td>onDrop</td> <td>targetRow,sourceRow,point</td> <td>在行被释放的时候触发。<br/>targetRow：要释放的目标行。<br/>sourceRow：被拖动的原始行。<br/>point：指明拖放操作，可用值有：'top','bottom'。 </td></tr></tbody></table> #### 方法 下列方法扩展自Datagrid，以下是新增的方法。 <table class="doc-table"><tbody><tr><th><strong>方法名</strong></th> <th><strong>方法参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>enableDnd</td> <td>index</td> <td>启用拖放行功能。'index' 参数表明什么行被拖放。如果该参数未指定将启用所有行的拖放功能。 <p>代码示例：</p><pre>$('#dg').datagrid('enableDnd', 1); // 启用第二行的拖放&#13; $('#dg').datagrid('enableDnd'); // 启用所有行的拖放</pre></td></tr></tbody></table>