jQuery EasyUI 拖放 - 基本的拖动和放置
jQuery EasyUI提供了draggable（可拖动）和droppable（可放置）插件，实现基本的拖放（Drag and Drop）功能。这些插件允许用户通过鼠标拖动元素，并放置到指定区域，常用于交互式界面如排序、购物车等。
本教程演示最基本的拖放：创建几个可拖动的方块，并定义一个放置区域。当拖动元素放入放置区时，显示提示并改变样式。
官方参考：
- 基本拖放教程：https://www.jeasyui.com/tutorial/dd/dnd1.php
- Draggable 文档：https://www.jeasyui.com/documentation/draggable.php
- Droppable 文档：https://www.jeasyui.com/documentation/droppable.php
- 在线 Demo：https://www.jeasyui.com/tutorial/dd/dnd1_demo.html
步骤 1: 引入 EasyUI 资源
<linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>步骤 2: 创建 HTML 结构
创建三个可拖动元素（div）和一个放置区域。
<divid="dd1"class="dd-demo">Draggable 1</div><divid="dd2"class="dd-demo">Draggable 2</div><divid="dd3"class="dd-demo">Draggable 3</div><divid="drop"class="dd-drop">Drop here</div><style>.dd-demo{width:100px;height:100px;background:#fafafa;border:1px solid #ccc;margin:10px;padding:20px;text-align:center;float:left;cursor:move;}.dd-drop{width:300px;height:200px;background:#fff;border:2px dashed #ccc;margin:50px auto;text-align:center;line-height:200px;font-size:20px;clear:both;}.over{border:2px dashed #000;background:#ff0;}</style>步骤 3: JavaScript 实现拖动和放置
使用.draggable()使元素可拖动，使用.droppable()定义放置区，并处理事件。
<scripttype="text/javascript">$(function(){// 使三个 div 可拖动$('#dd1').draggable({revert:true,// 未放入有效区时回弹proxy:'clone'// 拖动时显示克隆代理（可选）});$('#dd2').draggable({revert:true,cursor:'move',handle:null// 整个元素都可拖动});$('#dd3').draggable({revert:true,proxy:function(source){varp=$('<div class="proxy">Proxy</div>');p.html($(source).html()).appendTo('body');returnp;}// 自定义代理元素});// 定义放置区$('#drop').droppable({accept:'.dd-demo',// 只接受 .dd-demo 类的元素onDragEnter:function(e,source){$(this).addClass('over');// 拖入时高亮},onDragLeave:function(e,source){$(this).removeClass('over');// 拖出时恢复},onDrop:function(e,source){$(this).removeClass('over');$(this).append(source);// 将拖动元素追加到放置区$(this).html('Dropped! '+$(source).html());}});});</script>关键说明
- draggable选项：
revert: true：如果未放入有效 droppable，回弹到原位。proxy: 'clone'：拖动时显示克隆副本，原元素不动。proxy: function：自定义代理显示。
- droppable事件：
onDragEnter/onDragLeave：拖入/拖出时改变样式，提供视觉反馈。onDrop：放置成功时执行操作（如追加元素、更新数据）。accept：限制只接受特定选择器的 draggable。
- 视觉效果：拖动时元素有半透明代理，放置区有高亮反馈。
运行效果
- 用户可以拖动三个方块。
- 当拖入放置区时，边框变黑并背景变黄。
- 放置后，方块被追加到放置区，并显示 “Dropped!” 消息。
更多高级应用：
- 拖放购物车：https://www.jeasyui.com/tutorial/dd/dnd2.php
- 拖放课程表：https://www.jeasyui.com/tutorial/dd/dnd3.php
如果需要完整源码、自定义代理效果、或结合 datagrid/tree 的拖放示例，请提供更多细节！
