EasyUI系列学习(四)-Droppable(放置)
一、创建组件
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(放置)的更多相关文章
- 第一百九十四节,jQuery EasyUI,Droppable(放置)组件
jQuery EasyUI,Droppable(放置)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方 ...
- jQuery Easy UI Droppable(放置)组件
Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...
- droppable放置组件
Droppable 放置组件 所谓放置,就将一个事物入一个事物内触发各种效果,这个组件不依赖于其他组件.1.加载方式 //class 调用 <div id="dd" clas ...
- Droppable(放置组件)
一.class加载方式 <div id="pop" class="easyui-droppable" style="width: 400px;h ...
- Droppable(放置)组件
.加载方式 //class 加载方式 <div id="dd" class="easyui-droppable" data-options="a ...
- EasyUI系列学习(二)-使用EasyUI
一.引入必要文件 <!--1.0引入jQuery核心库--> <script src="jquery-easyui-1.4.4/jquery.min.js"> ...
- EasyUI系列学习笔记(一)——注册
前面介绍过EasyUI是一个前段框架,开发之前需要导入底层包:我这里采用的是EasyUI 1.4版本~ 今天主要是搭建一个EasyUI的环境,同时做一个登陆页面... 环境搭建 导入需要的文件到项目中 ...
- EasyUI系列学习(十一)-Accordion(分类)
一.加载 1.class加载 <div class="easyui-accordion" style="width:300px;height:200px" ...
- EasyUI系列学习(十)-Tabs(选项卡)
一.创建组件 <div class="easyui-tabs" style="width:500px;height:250px"> <div ...
随机推荐
- Springboot源码分析
参考资料 https://www.cnblogs.com/lizongshen/p/9127999.html
- Java Web学习总结(29)——Java Web中的Filter和Interceptor比较
1. 背景 在设计web应用的时候,用户登录/注册是必不可少的功能,对用户登录信息进行验证的方法也是多种多样,大致可以认为如下模式:前端验证+后台验证.根据笔者的经验,一般会在前端进行一些例如是否输入 ...
- 使用lombok提高编码效率-----不用写get set
使用lombok提高编码效率-----不用写get set https://blog.csdn.net/v2sking/article/details/73431364
- Mongodb慢查询笔记 (Mongodb slow query log)
-- =========================== -- mongodb slow query log -- =========================== Reference: h ...
- [BZOJ2594] [Wc2006]水管局长数据加强版(LCT + kruskal + 离线)
传送门 WC这个题真是丧心病狂啊,就是想学习一下怎么处理边权,给我来了这么一个破题! ORZ hzwer 临摹黄学长代码233 但还是复杂的一匹 理一下思路吧 题目大意:给定一个无向图,多次删除图中的 ...
- hdu4288 Coder(线段树单点更新)
题意:支持增删,查操作,最后的序列式递增的. 做法:主要是如何维护mod5的sum值,这里左儿子可以不用管,关键是右儿子的处理,可以假设右儿子有t个节点,左儿子有cnt个节点, 则令(t+cnt)MO ...
- Uva12657 Boxes in a Line
题目链接:传送门 分析:每次操作都会花费大量时间,显然我们只需要关注每个元素的左边是啥,右边是啥就够了,那么用双向链表,l[i]表示i左边的数,r[i]表示i右边的数,每次操作模拟一下数组的变化就好了 ...
- UVa - 12450 - SpaceRecon Tournament
先上题目: Problem G: SpaceRecon Tournament SpaceRecon, the hottest game of 2011, is a real-time strategy ...
- Mzc家中的男家丁
题目背景 mzc与djn的…还没有众人皆知,所以我们要来宣传一下. 题目描述 mzc家很有钱(开玩笑),他家有n个男家丁,现在mzc要将她们全都聚集起来(干什么就不知道了).现在知道mzc与男家丁们互 ...
- 洛谷—— P2049 魔术棋子
https://www.luogu.org/problem/show?pid=2049 题目描述 在一个M*N的魔术棋盘中,每个格子中均有一个整数,当棋子走进这个格子中,则此棋子上的数会被乘以此格子中 ...