easyUI Droppable

最新推荐文章于 2019-01-15 16:03:41 发布

雨泽

最新推荐文章于 2019-01-15 16:03:41 发布

阅读量2.3k

点赞数 1

分类专栏： javascript 文章标签： javascript div class

164 篇文章

订阅专栏

本文介绍了 EasyUI 框架中的 Droppable 组件及其使用方法。包括如何用 HTML 和 JavaScript 创建可放置区域，组件的属性如 accept 的用途，以及 onDragEnter、onDragOver 等事件的触发条件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@author YHC

覆盖默认值$.fn.droppable.defaults.

创建一个可放置区域,通过标记

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

使用javascript创建可放置区域

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

$('#dd').droppable({  
    accept:'#d1,#d3'  
});

Name	Type	Description	Default
accept	selector	决定那些拖拽元素,将被接受	null

Name	Parameters	Description
onDragEnter	e,source	当拖拽元素被拖入的时候触发. source参数指明拖拽的DOM元素.
onDragOver	e,source	当拖拽元素拖出时触发. source参数指明拖拽的DOM元素..
onDragLeave	e,source	当拖拽元素被拖离的时候触发.source参数指明拖拽DOM元素.
onDrop	e,source	当拖拽元素放下的时候触发.source参数指明拖拽的DOM元素.