当前位置：首页 > news >正文

jQuery EasyUI 拖放 - 基本的拖动和放置

news 2026/6/29 17:57:41

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。
视觉效果：拖动时元素有半透明代理，放置区有高亮反馈。