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正则表达式基础入门
这是我第一次写的博客,个人觉得十分不容易.以前看别人写的博客文字十分流畅,到自己来写却发现十分困难,还是感谢那些为技术而奉献自己力量的人吧. 本教程编写之前,博主阅读了<正则指引>这本入门 ...
随机推荐
- Spring中的注解 @Qualifier
在使用Spring框架中@Autowired标签时默认情况下使用 @Autowired 注释进行自动注入时,Spring 容器中匹配的候选 Bean 数目必须有且仅有一个.当找不到一个匹配的 Bean ...
- oracle主键设置与oracle序列
第一步:添加主键(如果已有且是自己命名的可略过) 一个表中要有主键,我们建主键的时候要自己命名,如果不是可能在后边遇到“主键唯一,不能自动添加”的问题. 设置主键: alter table " ...
- queue 类
一:普通队列 1.队列特征:先进先出,它只允许在一端(队尾)进行插入元素操作,在另一端(队头)进行删除元素操作 2. 存取类函数 front():用来取出queue中的队头元素,对应于front()函 ...
- PHP允许AJAX跨域请求的两种方法
* 一. 服务端设置 header 头允许AJAX跨域 ** 代码如下: // 允许 ityangs.net 发起的跨域请求 header("Access-Control-Allow-Ori ...
- Spring @注解详解（转）
1.@controller 控制器(注入服务) 2.@service 服务(注入dao) 3.@repository dao(实现dao访问) 4.@component (把普通pojo实例化到spr ...
- codeforces 449D DP+容斥
Jzzhu and Numbers Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u ...
- 【CF1028A】Find Square（签到）
题意:给定矩阵里,找到由B构成的矩形的中心 n,m<=115 思路: #include<cstdio> #include<cstring> #include<str ...
- Codeforces878C. Tournament
$n \leq 50000$个人,每个人有$K \leq 10$个属性,现对每一个前缀问:进行比赛,每次任意两人比任意属性,小的淘汰(保证同一属性不会出现两个相同的数),最终有几个人有可能获胜. 明显 ...
- polyfill for Function--源码
/** * polyfill for Function */ // from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refer ...
- grep用法详解:grep与正则表达式【转】
转自:http://blog.csdn.net/hellochenlian/article/details/34088179 grep用法详解:grep与正则表达式 首先要记住的是: 正则表达式与通配 ...