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=

独立网站:点击打开链接