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

Droppable

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

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

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

属性

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

名称类型描述信息默认值
acceptselector决定哪些课拖拽的元素能被接受null
disableboolean如果为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=

          独立站点:点击打开链接



# easyui
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生