Here is the example shows how to drag a row from player datagrid and drop it on the team datagrid.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-dnd.js"></script>
<script>
var data1 = [
{ "playerUUID": "UUID1", "playerName": "Name1" },
{ "playerUUID": "UUID2", "playerName": "Name2" },
{ "playerUUID": "UUID3", "playerName": "Name3" },
{ "playerUUID": "UUID4", "playerName": "Name4" },
{ "playerUUID": "UUID5", "playerName": "Name5" }
];
var data2 = [
{ "playerUUID": "UUID6", "playerName": "Name6" },
{ "playerUUID": "UUID7", "playerName": "Name7" }
];
$(function () {
$('#dgPlayer').datagrid({
singleSelect: true,
data: data1,
onLoadSuccess: function () {
$(this).datagrid('enableDnd');
},
onBeforeDrop: function () {
return false;
}
})
$('#dgTeam').datagrid({
singleSelect: true,
data: data2,
onLoadSuccess: function () {
$(this).datagrid('enableDnd');
},
onBeforeDrag: function () {
return false;
}
})
})
</script>
</head>
<body>
<div class="f-row">
<div>
<table id="dgPlayer" title="Player" style="width:400px;height:250px">
<thead>
<tr>
<th data-options="field:'playerUUID',width:100">playerUUID</th>
<th data-options="field:'playerName',width:200">playerName</th>
</tr>
</thead>
</table>
</div>
<div>
<table id="dgTeam" title="Team" style="width:400px;height:250px">
<thead>
<tr>
<th data-options="field:'playerUUID',width:100">playerUUID</th>
<th data-options="field:'playerName',width:200">playerName</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
