jEasyUI 拖放学习笔记

介绍

jEasyUI 是一款基于 jQuery 的易用、高效、美观的 UI 库，其中拖放功能是其独特的功能之一。本文将介绍 jEasyUI 的拖放功能以及如何使用该功能来实现交互效果。

实例

下面将通过一个实例来演示如何使用 jEasyUI 的拖放功能。

HTML

首先，需要在 HTML 中引入必要的库和样式：

htmlCopy Code
<link rel="stylesheet" href="https://cdn.staticfile.org/jquery-easyui/1.9.14/themes/default/easyui.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/jquery-easyui/1.9.14/themes/icon.css">
<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-easyui/1.9.14/jquery.easyui.min.js"></script>

然后，需要创建两个 div，分别用于拖拽源和目标：

htmlCopy Code
<div id="source" class="box">源</div>
<div id="target" class="box">目标</div>

CSS

为了让元素可以拖拽、放置，需要在 CSS 中设置相应的样式：

cssCopy Code
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  text-align: center;
  line-height: 100px;
  cursor: move;
}

JavaScript

接下来，在 JavaScript 中初始化 jEasyUI 的拖放功能：

javascriptCopy Code
$('#source').draggable({
    revert:true,
    proxy:'clone',
    onStartDrag:function(){
        $(this).draggable('options').cursor='not-allowed';
        $(this).draggable('proxy').css('z-index',10);
    },
    onStopDrag:function(){
        $(this).draggable('options').cursor='move';
    }
});

$('#target').droppable({
    onDragEnter:function(e,source){
        $(source).draggable('options').cursor='auto';
    },
    onDragLeave:function(e,source){
        $(source).draggable('options').cursor='not-allowed';
    },
    onDrop:function(e,source){
        $(source).appendTo(this);
    }
});

以上代码中，$('#source') 用于选取拖拽源，$('#target') 用于选取目标容器。

拖拽源使用 draggable 方法进行初始化，其中需要设置 revert 参数为 true，表示当拖拽结束时如果没有放置到目标容器中，则返回原位置；设置 proxy 参数为 clone，表示被拖拽的元素在拖拽过程中会创建一个克隆，该克隆用于跟随鼠标移动。此外还需要设置 onStartDrag 和 onStopDrag 回调函数，用于调整拖拽过程中被拖拽元素的样式。

目标容器使用 droppable 方法进行初始化，其中需要设置 onDragEnter、onDragLeave 和 onDrop 回调函数，分别用于设置拖拽进入容器时的样式、拖拽离开容器时的样式、和拖拽放置到容器中时的处理。

总结

本文介绍了 jEasyUI 的拖放功能，并通过实例演示了如何使用该功能来实现交互效果。jEasyUI 提供了丰富的 UI 组件和易用的 API，对于前端开发者而言是一款值得推荐的 UI 库。