EasyUI基础入门之Droppable(可投掷)
怎么说呢Droppable这个单词究竟是什么意思,准确来说easyui作者究竟要表达什么意思，还是不大好拿捏的。只是没关系,没有必要纠结与这些细枝末节的东西,依据官网的demo效果,就简单的将之定义为(可投掷)吧!
Droppable
droppable和draggable有类似的地方,只是差别点在于前者着重于将元素放进某个容器中,而后者则着重于可拖拽(尽管可能一些效果两者都能够实现)。
并且通过查看easyloader源代码可知道。droppable并不依赖于draggable。
Droppable覆盖默认值$.fn.droppable。
以下依据官网doc,看看其所具有的属性、事件、方法吧。
属性
droppable具有的属性不多,到眼下的easyui版本号仅仅有两个例如以下表:
| 名称 | 类型 | 描写叙述信息 | 默认值 |
| accept | selector | 决定哪些课拖拽的元素能被接受 | null |
| disable | boolean | 假设为true则停止投掷 | false |
事件
| 名称 | 參数 | 描写叙述信息 |
| onDragEnter | e,source | 当拖拽元素被拖入的时候触发.source參数指明拖拽的DOM元素 |
| onDragOver | e,source | 当拖拽元素被拖出(成功放入某个容器)的时候触发(且在onDrop之前触发).source參数指明拖拽的DOM元素 |
| onDragLeave | e,source | 当拖拽元素被拖离的时候触发.source參数指明拖拽的DOM元素 |
| onDrop | e,source | 当拖拽元素被放下的时候触发.source參数指明拖拽的DOM元素 |
方法
| 名称 | 參数 | 描写叙述信息 |
| options | none | 返回options对象 |
| enable | none | 可投掷 |
| disable | none | 不可投掷 |
使用方式
和Draggable一样,Droppable相同有两种创建方式。
1、通过html标记创建:
<div class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;background:gray;">
</div>
2、通过js脚本创建:
<div class="easyui-droppable" id="dd" style="width:100px;height:100px;background:gray;">
</div>
<script>
$('#dd').droppable({
accept: '#d1,#d3'
});
</script>
Demo
easyui官方提供了关于Droppable的demo,地址这里就不给出了。直接看看官方给出一个样例吧:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Accept a Drop - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">
<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
</head>
<body>
<div style="margin:20px 0;"></div>
<div id="source" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
drag me!
<div id="d1" class="drag">Drag 1</div>
<div id="d2" class="drag">Drag 2</div>
<div id="d3" class="drag">Drag 3</div>
</div>
<div id="target" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
drop here!
</div>
<div style="clear:both"></div>
<style type="text/css">
.drag{
width:100px;
height:50px;
padding:10px;
margin:5px;
border:1px solid #ccc;
background:#AACCFF;
}
.dp{
opacity:0.5;
filter:alpha(opacity=50);
}
.over{
background:#FBEC88;
}
</style>
<script>
/**
使用js方式将元素设置为可draggable的
*/
$(function(){
$('.drag').draggable({
proxy:'clone',
revert:true,
cursor:'pointer',
onStartDrag:function(){
$(this).draggable('options').cursor='not-allowed';//设置鼠标样式为不可拖动
$(this).draggable('proxy').addClass('dp');//设置样式
},
onStopDrag:function(){
$(this).draggable('options').cursor='auto';//设置鼠标
}
});
//将容易置为droppable而且可接受元素
$('#target').droppable({
accept:'#d1,#d3',
onDragEnter:function(e,source){//拖入
$(source).draggable('options').cursor='auto';
$(source).draggable('proxy').css('border','1px solid red');
$(this).addClass('over');
},
onDragLeave:function(e,source){//脱离
$(source).draggable('options').cursor='not-allowed';
$(source).draggable('proxy').css('border','1px solid #ccc');
$(this).removeClass('over');
},
onDrop:function(e,source){//放下
$(this).append(source)
$(this).removeClass('over');
alert("我被放下了");
} ,
//onDropOver当元素被拖出(成功放入到某个容器)的时候触发
onDragOver:function(e,source){
alert("我被拖出去了");//先于alert("我被放下了");运行,表明其触发在onDrop之前。
}
});
});
</script> </body>
</html>
执行效果图这里就不给出了,官网直接就能够查看。OVER!
效果地址:http://www.jeasyui.com/demo/main/index.php?
plugin=Droppable&theme=default&dir=ltr&pitem=
EasyUI基础入门之Droppable(可投掷)的更多相关文章
- EasyUI基础入门之Parser(解析器)
前言 JQuery EasyUI提供的组件包含功能强大的DataGrid,TreeGrid.面板.下拉组合等.用户能够组合使用这些组件,也能够单独使用当中一个.(使用的形式是以插件的方式提供的) Ea ...
- EasyUI基础入门之Easyloader(载入器)
在了解完easyui的parser(解析器)之后,接下来就是easyloader(简单载入器)的学习了. 什么是EasyLoader 正如其名字一样easyloader的作用是为了动态的载入组件所需的 ...
- EasyUI基础入门之Pagination(分页)
前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组 ...
- EasyUI基础入门之Resiable(可缩放)
easyui的base插件学习已经进行到Resizable(可缩放)了.照旧看看easyui官网的API. Resiable 正如其字面意思一样(可伸缩),resiable主要是将一些html元素扩展 ...
- easyUI基础入门
头部需要引人文件:<!DOCTYPE html><html><head> <meta charset="utf-8"> <ti ...
- jQuery UI 之 EasyUI 快速入门
jQuery EasyUI 基础 转载自(http://www.shouce.ren/api/view/a/3350) jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- 「译」JUnit 5 系列：基础入门
原文地址:http://blog.codefx.org/libraries/junit-5-basics/ 原文日期:25, Feb, 2016 译文首发:Linesh 的博客:JUnit 5 系列: ...
- .NET正则表达式基础入门
这是我第一次写的博客,个人觉得十分不容易.以前看别人写的博客文字十分流畅,到自己来写却发现十分困难,还是感谢那些为技术而奉献自己力量的人吧. 本教程编写之前,博主阅读了<正则指引>这本入门 ...
随机推荐
- 【java基础 14】锁的粒度：ThreadLocal、volatile、Atomic和Synchronized
导读:题目中提到的几个关键字,分别是解决并发问题中,加锁所使用到的几个关键字,每个关键字代表的锁的粒度 不同,本篇博客,主要是从概念定义上,区分这几个关键字的应用场景.(PS:睡梦中,依稀记得有回面试 ...
- 性能测试之七--jdbc
jdbs用任意协议打开都行,具体脚本见下 在vuser_init里面 #include "Ptt_Mysql.h" vuser_init() { lr_load_dll (&quo ...
- Java面试题之Java反射的原理
什么是Java的反射? 在运行状态中,对于任意一个类,都能够知道这个类的属性和方法: 反射的作用? 如果给定一个类名,就可以通过反射机制来获取类的所有信息,也可以动态的创建对象和编译: 反射的原理? ...
- window maven安装（六）
Maven 实战系列之在Windows上安装Maven Maven是一个优秀的构建工具(类似于 Ant, 但比 Ant 更加方便使用),能帮助我们自动化构建过程,从清理.编译.测试到生成报告,再到打包 ...
- [暑假集训--数位dp]hdu3555 Bomb
The counter-terrorists found a time bomb in the dust. But this time the terrorists improve on the ti ...
- 实验五 burpsuite重放攻击实验
一.实验目的 使用burpsuite软件实现重放攻击. 二.实验准备 1.笔记本电脑一台,安装vmware虚拟机和windows XP系统,下载安装burpsuite professional v1. ...
- stein法求gcd 学习笔记
原理显然 由于当x,y都为奇数时进行辗转相见 每次减完必有偶数 而偶数最多除log次 那么也最多减log次 复杂度有保证 注:代码未验证 int gcd(int x,int y){ int res=1 ...
- 切糕（bzoj 3144）
Description Input 第一行是三个正整数P,Q,R,表示切糕的长P. 宽Q.高R.第二行有一个非负整数D,表示光滑性要求.接下来是R个P行Q列的矩阵,第z个 矩阵的第x行第y列是v(x, ...
- 如何在requirejs下引用bootstrap
原本以为只要require过来就能用 require(['jquery','underscore','bootstrap','cache'],function($,U,B,C){ 但发现会报错,类似未 ...
- Day 20 迭代器、生成器
一. 迭代器 1.迭代器协议是指:对象必须提供一个next方法,执行该方法要么返回迭代中的下一项,要么就引起一个StopIteration异常,以终止迭代 (只能往后走不能往前退) 2.可迭代对象:实 ...