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正则表达式基础入门
这是我第一次写的博客,个人觉得十分不容易.以前看别人写的博客文字十分流畅,到自己来写却发现十分困难,还是感谢那些为技术而奉献自己力量的人吧. 本教程编写之前,博主阅读了<正则指引>这本入门 ...
随机推荐
- isinstance 和 type 的区别
class A: pass class B(A): pass isinstance(A(), A) # returns True type(A()) == A # returns True isins ...
- 利用hibernate与struts框架制作简单注册界面
一:配置hibernate 1.导包 hibernate包和jdbc连接mysql数据库的包 2.实用工具生成hibernate配置文件和映射文件 3.做好hibernateUtil生成session ...
- Welcome-to-Swift-14构造过程（Initialization）
构造过程是为了使用某个类.结构体或枚举类型的实例而进行的准备过程.这个过程包含了为实例中的每个属性设置初始值和为其执行必要的准备和初始化任务. 构造过程是通过定义构造器(Initializers)来实 ...
- [AtCoderContest015D]A or...or B Problem
[AtCoderContest015D]A or...or B Problem 试题描述 Nukes has an integer that can be represented as the bit ...
- luoguP1040 区间DP(记忆化 加分二叉树
dp[l][r]记录中序序列为l, l+1..r的最大加分值 root[l][r]记录这个序列的根节点 转移 i 为根节点 dp[l][r] = max(dp[l][i-1]*dp[l+1][r]+a ...
- 标准C程序设计七---40
Linux应用 编程深入 语言编程 标准C程序设计七---经典C11程序设计 以下内容为阅读: <标准C程序设计>(第7版) 作者 ...
- poj 1573(搜索)
Robot Motion Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 12351 Accepted: 5982 Des ...
- Python Challenge 第五关
进入第五关,一张图和一行提示: pronounce it.右键源代码,只有一行注释: <!-- peak hell sounds familiar ? --> peak hell 听起来熟 ...
- Python远程视频监控程序
老板由于事务繁忙无法经常亲临教研室,于是让我搞个监控系统,让他在办公室就能看到教研室来了多少人.o(>﹏<)o||| 最初我的想法是直接去网上下个软件,可是找来找去不是有毒就是收费,无奈技 ...
- [原创][FPGA]有限状态机FSM学习笔记（一）
1. 概述--何为有限状态机FSM? 有限状态机-Finite State Machine,简写为FSM,是表示有限个状态及在这些状态之间的转移和动作等行为的数学模型,在计算机领域有着广泛的应用.通常 ...