EasyUI基础入门之Droppable(可投掷)

来源：互联网发布：软件如何防止破解编辑：程序博客网时间：2024/05/01 23:54

怎么说呢Droppable这个单词到底是什么意思,准确来说easyui作者到底要表达什么意思，还是不大好拿捏的。不过没关系,没有必要纠结与这些细枝末节的东西,根据官网的demo效果,就简单的将之定义为(可投掷)吧!

Droppable

droppable和draggable有类似的地方,不过区别点在于前者着重于将元素放进某个容器中,而后者则着重于可拖拽(虽然可能一些效果两者都可以实现)。而且通过查看easyloader源码可知道，droppable并不依赖于draggable。

Droppable覆盖默认值$.fn.droppable。

下面根据官网doc,看看其所具有的属性、事件、方法吧。

属性

droppable具有的属性不多,到目前的easyui版本只有两个如下表:

名称类型描述信息默认值acceptselector决定哪些课拖拽的元素能被接受nulldisableboolean如果为true则停止投掷false

事件

名称参数描述信息onDragEntere,source当拖拽元素被拖入的时候触发.source参数指明拖拽的DOM元素onDragOvere,source当拖拽元素被拖出(成功放入某个容器)的时候触发(且在onDrop之前触发).source参数指明拖拽的DOM元素onDragLeavee,source当拖拽元素被拖离的时候触发.source参数指明拖拽的DOM元素onDrope,source当拖拽元素被放下的时候触发.source参数指明拖拽的DOM元素

方法

名称参数描述信息optionsnone返回options对象enablenone可投掷disablenone不可投掷

使用方式

和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=

独立站点:点击打开链接

1 0