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

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 资源

<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://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

步骤 2: 创建 HTML 结构

创建三个可拖动元素（div）和一个放置区域。

<div id="dd1" class="dd-demo">Draggable 1</div>
<div id="dd2" class="dd-demo">Draggable 2</div>
<div id="dd3" class="dd-demo">Draggable 3</div>

<div id="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() 定义放置区，并处理事件。

<script type="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){
                var p = $('<div class="proxy">Proxy</div>');
                p.html($(source).html()).appendTo('body');
                return p;
            }                   // 自定义代理元素
        });

        // 定义放置区
        $('#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 的拖放示例，请提供更多细节！