一、创建组件

1.使用标签创建一个放置区

<div id="pox" class="easyui-droppable" style="width: 200px; height: 100px; left: 100px; background:cyan"></div>

2.使用JavaScript创建一个放置区

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan"></div>
<script>
$(function () {
$("#pox").droppable();
})
</script>

二、属性

1.accept:哪些元素会对放置区有影响

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box1" style="width:100px;height:50px;left:100px;background:lightcoral">物品1</div>
<div id="box2" style="width:100px;height:50px;left:100px;background:darkseagreen">物品2</div>
<script>
$(function() {
$("#box1").draggable();
$("#box2").draggable();
$("#pox").droppable({
accept: "#box1,#box2",
onDragEnter: function(e, source) {
//source分别放入的物体,即box1对象,box2对象
alert($(source).html());
},
});
});
</script>

2.disabled:如果为true,则禁止放置,即放置没有效果

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box1" style="width:100px;height:50px;left:100px;background:lightcoral">物品1</div>
<div id="box2" style="width:100px;height:50px;left:100px;background:darkseagreen">物品2</div>
<script>
$(function () {
$("#box1").draggable();
$("#box2").draggable();
$("#pox").droppable({
accept: "#box1,#box2",
disabled: true,
onDragEnter: function (e, source) {
//不会弹出任何东西
alert($(source).html());
},
});
});
</script>

三、事件

1.onDragEnter:在被拖拽元素到放置区内的时候触发,source参数表示被拖拽的DOM元素

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
$(function () {
$("#box").draggable();
$("#pox").droppable({
accept: "#box",
onDragEnter: function (e, source) {
$(this).css("background", "red");;
},
});
});
</script>

2.onDragLeave:在被拖拽元素离开放置区的时候触发,source参数表示被拖拽的DOM元素

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
$(function () {
$("#box").draggable();
$("#pox").droppable({
accept: "#box",
onDragEnter: function (e, source) {
$(this).css("background", "red");;
},
onDragLeave: function (e, source) {
$(this).css("background", "yellow");
}
});
});
</script>

3.onDrop:在被拖拽元素放入到放置区的时候触发,source参数表示被拖拽的DOM元素

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
$(function () {
$("#box").draggable();
$("#pox").droppable({
accept: "#box",
onDragEnter: function (e, source) {
$(this).css("background", "red");;
},
onDragLeave: function (e, source) {
$(this).css("background", "yellow");
},
onDrop: function (e, source) {
$(this).css("background", "green");
}
});
});
</script>

4.onDragOver:在被拖拽元素经过放置区的时候触发,source参数表示被拖拽的DOM元素

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
$(function () {
$("#box").draggable();
$("#pox").droppable({
accept: "#box",
onDragEnter: function (e, source) {
$(this).css("background", "red");;
},
onDragLeave: function (e, source) {
$(this).css("background", "yellow");
},
onDrop: function (e, source) {
$(this).css("background", "green");
},
onDragOver: function (e, source) {
$(this).css("background", "orange");
}
});
});
</script>

四、方法

1.options:返回属性对象

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
$(function () {
$("#pox").droppable({
accept: "#box"
});
console.log($("#pox").droppable("options"));
});
</script>

2.disable:禁用放置功能

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
$(function () {
$("#box").draggable();
$("#pox").droppable({
accept: "#box",
onDragEnter: function (e, source) {
$(this).css("background", "red");;
},
});
//放置物品不会变色
$("#pox").droppable("disable");
});
</script>

3.enable:启用放置功能

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
$(function () {
$("#box").draggable();
$("#pox").droppable({
accept: "#box",
onDragEnter: function (e, source) {
$(this).css("background", "red");;
},
});
$("#pox").droppable("disable");
//放置区会变色
$("#pox").droppable("enable");
});
</script>

五、重写默认对象

1.使用$.fn.droppable.defaults重写默认值对象

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
$(function () {
$.droppable.defaults.disabled = true;
$("#box").draggable();
$("#pox").droppable({
accept: "#box",
onDragEnter: function (e, source) {
$(this).css("background", "red");;
},
});
});
</script>

EasyUI系列学习(四)-Droppable(放置)的更多相关文章

  1. 第一百九十四节,jQuery EasyUI,Droppable(放置)组件

    jQuery EasyUI,Droppable(放置)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方 ...

  2. jQuery Easy UI Droppable(放置)组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

  3. droppable放置组件

    Droppable 放置组件 所谓放置,就将一个事物入一个事物内触发各种效果,这个组件不依赖于其他组件.1.加载方式 //class 调用 <div id="dd" clas ...

  4. Droppable(放置组件)

    一.class加载方式 <div id="pop" class="easyui-droppable" style="width: 400px;h ...

  5. Droppable(放置)组件

    .加载方式 //class 加载方式 <div id="dd" class="easyui-droppable" data-options="a ...

  6. EasyUI系列学习(二)-使用EasyUI

    一.引入必要文件 <!--1.0引入jQuery核心库--> <script src="jquery-easyui-1.4.4/jquery.min.js"> ...

  7. EasyUI系列学习笔记(一)——注册

    前面介绍过EasyUI是一个前段框架,开发之前需要导入底层包:我这里采用的是EasyUI 1.4版本~ 今天主要是搭建一个EasyUI的环境,同时做一个登陆页面... 环境搭建 导入需要的文件到项目中 ...

  8. EasyUI系列学习(十一)-Accordion(分类)

    一.加载 1.class加载 <div class="easyui-accordion" style="width:300px;height:200px" ...

  9. EasyUI系列学习(十)-Tabs(选项卡)

    一.创建组件 <div class="easyui-tabs" style="width:500px;height:250px"> <div ...

随机推荐

  1. Springboot源码分析

    参考资料 https://www.cnblogs.com/lizongshen/p/9127999.html

  2. Java Web学习总结(29)——Java Web中的Filter和Interceptor比较

    1. 背景 在设计web应用的时候,用户登录/注册是必不可少的功能,对用户登录信息进行验证的方法也是多种多样,大致可以认为如下模式:前端验证+后台验证.根据笔者的经验,一般会在前端进行一些例如是否输入 ...

  3. 使用lombok提高编码效率-----不用写get set

    使用lombok提高编码效率-----不用写get    set https://blog.csdn.net/v2sking/article/details/73431364

  4. Mongodb慢查询笔记 (Mongodb slow query log)

    -- =========================== -- mongodb slow query log -- =========================== Reference: h ...

  5. [BZOJ2594] [Wc2006]水管局长数据加强版(LCT + kruskal + 离线)

    传送门 WC这个题真是丧心病狂啊,就是想学习一下怎么处理边权,给我来了这么一个破题! ORZ hzwer 临摹黄学长代码233 但还是复杂的一匹 理一下思路吧 题目大意:给定一个无向图,多次删除图中的 ...

  6. hdu4288 Coder(线段树单点更新)

    题意:支持增删,查操作,最后的序列式递增的. 做法:主要是如何维护mod5的sum值,这里左儿子可以不用管,关键是右儿子的处理,可以假设右儿子有t个节点,左儿子有cnt个节点, 则令(t+cnt)MO ...

  7. Uva12657 Boxes in a Line

    题目链接:传送门 分析:每次操作都会花费大量时间,显然我们只需要关注每个元素的左边是啥,右边是啥就够了,那么用双向链表,l[i]表示i左边的数,r[i]表示i右边的数,每次操作模拟一下数组的变化就好了 ...

  8. UVa - 12450 - SpaceRecon Tournament

    先上题目: Problem G: SpaceRecon Tournament SpaceRecon, the hottest game of 2011, is a real-time strategy ...

  9. Mzc家中的男家丁

    题目背景 mzc与djn的…还没有众人皆知,所以我们要来宣传一下. 题目描述 mzc家很有钱(开玩笑),他家有n个男家丁,现在mzc要将她们全都聚集起来(干什么就不知道了).现在知道mzc与男家丁们互 ...

  10. 洛谷—— P2049 魔术棋子

    https://www.luogu.org/problem/show?pid=2049 题目描述 在一个M*N的魔术棋盘中,每个格子中均有一个整数,当棋子走进这个格子中,则此棋子上的数会被乘以此格子中 ...