1. 引入必要的文件： 在 HTML 页面中引入 jQuery、EasyUI 的 CSS 和 JavaScript 文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
</body>
</html>
2. 创建可拖动和可放置的元素： 在页面中创建两个元素，其中一个可以拖动，另一个可以作为拖动目标。
<div id="draggableElement" class="draggable">Drag me</div>
<div id="droppableArea" class="droppable">Drop here</div>
3. 初始化拖动和放置： 使用 EasyUI 提供的 draggable 和 droppable 函数初始化拖动和放置的功能。
<script>
$(function(){
// 初始化可拖动元素
$('#draggableElement').draggable({
revert: true, // 拖动结束后返回原位置
proxy: 'clone' // 创建一个元素的副本进行拖动
});
// 初始化可放置区域
$('#droppableArea').droppable({
onDrop: function(e, source){
$(this).append($(source));
// 在此处可以添加拖动结束后的处理逻辑
}
});
});
</script>
在这个例子中，#draggableElement 是一个可拖动的元素，使用 draggable 函数初始化。#droppableArea 是一个可放置的区域，使用 droppable 函数初始化。当拖动结束时，onDrop 回调函数会被调用，你可以在这里添加拖动结束后的处理逻辑，例如改变元素的样式或触发其他操作。
请注意，这只是一个简单的例子，具体的实现可以根据你的需求和业务逻辑进行更复杂的定制。
转载请注明出处：http://www.zyzy.cn/article/detail/13089/jQuery EasyUI