Title: Drag and drop between datagrids
Post by: jega on December 13, 2025, 02:27:58 PM
HI.
Have searched around but not found exact what i need.
Have a datagrid with players and 4 datagrids for teams.
Players dg have an ID, playerUUID and playerName column. Team dg has playerUUID and playerName columns
Want to drag from player to a team (and remove it from player). If placed wrong, drag it from team back to player. No dnd between teams.
Need it in a small project in 8 days. ;-)
Any help
Regards Jesper
Title: Re: Drag and drop between datagrids
Post by: jarry on December 15, 2025, 11:50:07 PM
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>
|