06 jQuery EasyUI 之Droppable可放置

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 74 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/520619

文章标签：

#javascript #ViewUI

本文详细介绍了如何使用Draggable与Droppable插件实现元素的拖拽功能。包括两种创建Droppable区域的方法：一种是通过HTML标记，另一种是使用JavaScript。此外还列举了与拖拽相关的事件及其用途。

使用Draggable元素需要拖动到指定的元素，那这儿需要使用到Droppable可放置插件

Droppable可放置有2种实现方式：

第一种通过标记实现Droppable可放置区域

<div class="easyui-droppable" data-options="accept:'#d1,#d2'" style="width:100px;height:100px;"></div>

<div id="d1"></div>

<div id="d2"></div>

<div id="d3"></div>

class="easyui-droppable" 指定可放置区域 data-options="accept:'#d1,#d2'" 能被放置的模块：d1和d2可以 d3不能放到这个区域

第二种通过javascript实现Droppable可放置区域

先定义一个div

<div id="dd" style="width:100px;height:100px;"></div>

在使用javascript创建

$('#dd').droppable({   

     accept:'#d1,#d2',

     disabled:true//设置为true 停止可拖放
});

accept 确定将被接受的可拖动元素

事件：

Name	Parameters	Description
onDragEnter	e,source	可拖动元素被拖进来触发
onDragOver	e,source	可拖动元素被拖过时触发
onDragLeave	e,source	可拖动元素被拖离开时触发
onDrop	e,source	可拖动元素被拖放下触发