Easyui 在dialog中加载datagrid，并实现可拖放行(drag and drop rows)

Easyui 在dialog中加载datagrid，并实现可拖放行的数据表格
1.html部分

<div id="dialogProperty">
    <table id="datagridProperty">
        <thead>
            <tr>
                <th data-options="field:'sort',width:94,align:'center'">顺序</th>
                <th data-options="field:'text',width:150,align:'center'">属性</th>
            </tr>
        </thead>
    </table>
</div>

2.加载dialog弹出框

$("#dialogProperty").dialog({
        title : '属性模板排序',
        width : 260,
        height: 300,
//      left : 300,
//      top : 200, center方法可以绝对居中
        closed : true,  //是否可以关闭窗口
        cache : false,  
        modal : true,   //模式化窗口
        buttons :[{
            text : '取消',
            handler : function(){
                $("#dialogProperty").window('close');
            } 
        },{
            text : '保存',
            handler : function(){
                //TODO submit data and close this window
                $("#dialogProperty").window('close');              
            } 
        }],
        onBeforeOpen : function(){  //dialog展示前,使其绝对居中
            $("#dialog_property").dialog("center");
        }
    });

3.dialog中展示可以拖动的datagrid
文件中需要引入以下文件

<script type="text/javascript" src="${basePath}/resources/easyui/datagrid-dnd.js"></script>

$("#datagridProperty").datagrid({
        fitColumns : false,
        striped : true,
        data : dataArray,
        onLoadSuccess:function(){
            //数据加载成功之后,使其可以拖动
            $(this).datagrid('enableDnd');
        },
        onDrop : function(targetRow,sourceRow,point){
//          console.log(targetRow + "," + sourceRow + "," + point);
        }
    });

4.datagrid-dnd.js下载地址：
esayuiApi上的下载地址
我的资源地址