第 4 章 Droppable(放置)组件

最新推荐文章于 2023-04-07 17:22:39 发布

lgs198722

最新推荐文章于 2023-04-07 17:22:39 发布

阅读量210

点赞数

分类专栏： easyui 文章标签： easyui 前端 javascript

本文链接：https://blog.youkuaiyun.com/lgs198722/article/details/122223760

版权

easyui 专栏收录该内容

9 篇文章

订阅专栏

本篇博客详细介绍了EasyUI中的Droppable组件，主要讲解了其作为放置功能的使用，包括加载方式、属性、事件和方法列表，强调了该组件独立工作的特性，并提供了示例。

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

学习要点:

加载方式
属性列表
事件列表
方法列表

本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方法，所谓放置，就将一个物体入某一个物体内触发各种效果，这个组件不依赖于其他组件。

一.加载方式
//class 加载方式 
<div id="dd" class="easyui-droppable" data-options="accept:'#box,#pox'"style="background:black;width:600px;height:400px;"></div>

//JS 加载调用
$('#box').droppable({
    accept:'#box,#pox', 
});

二.属性列表

//属性设置

$('#dd').droppable({
    accept : '#box',
    disabled : true,
});

Draggable 属性

属性名	值	说明
accept	selector	默认为 null，确定哪些元素被接受
disabled	boolean	默认为 false，如果为 true，则禁止放置

三.事件列表

Droppable 事件

事件名	传参	说明
onDragEnter	e,source	在被拖拽元素到放置区内的时候触发
onDragOver	e,source	在被拖拽元素经过放置区的时候触发
onDragLeave	e,source	在被拖拽元素离开放置区的时候触发
onDrop	e,source	在被拖拽元素放入到放置区的时候触发

PS:source 参数获取 DOM 元素。

$('#dd').droppable({
    accept : '#box',
    onDragOver : function (e, source) {
        $(this).css('background', 'blue'); 
    },
    onDragEnter : function (e, source) { 
        $(this).css('background', 'orange');
    },
    onDragLeave : function (e, source) {
        $(this).css('background', 'green'); 
    },
        onDrop : function (e, source) { $(this).css('background', 'maroon');
    }, 
});

四.方法列表

Droggable 方法

方法名	传参	说明
options	none	返回属性对象
enable	none	启用放置功能
disable	none	禁用放置功能

//返回属性对象
console.log($('#box').droggable('options'));

//禁止放置 
$('#box').draggable('disable');

//启用放置
$('#box').draggable('enable');

PS:我们可以使用$.fn.droppable.defaults 重写默认值对象。 
$.fn.droppable.defaults.disabled = true;

李炎恢 jQuery EasyUI 视频教程_哔哩哔哩_bilibili