Droppable 放置组件
所谓放置，就将一个事物入一个事物内触发各种效果，这个组件不依赖于其他组件。
1、加载方式
//class 调用
<div id="dd" class="easyui-droppable" data-options="accept:#box,#pox" style="background:black;width:600px;height:400px;">
</div>
//JS调用
$("#box").droppable({
accept:"#box,#pox"
});

2、属性列表
accept selector 默认值为null，确定哪些元素被接受
disabled boolean 默认为false，如果为true，则禁止放置

3、事件
onDragEnter e,source 当可拖动元素被拖进来时触发，source参数指被拖动的dom元素
onDragOver e,source 当可拖动的元素被拖放时触发。source参数指被拖动的dom元素
onDrogLeave e，source 当可拖动的元素被拖离开时触发。source参数指被拖动的dom元素
onDrop e，source 当可拖动元素被放下时触发。source参数指被拖动的dom元素

4、方法
options none 返回选项（options）对象
enable none 启用可放置功能
disable none 禁用可防止功能

只有放置组件接受拖动的组件，放置组件的事件才能生效.
如果设置了disabled属性为true，则对应放置组件的事件也失去效果
onDragEnter 只执行一次，先于onDragOver执行，onDragOver托定的过程中一直执行。
onDrop是拖动到放置区，放置那一瞬间触发的操作
disable和enable和disabled的效果差不多。

设置默认组件的配置：
如：$.fn.droppable.defaults.disabled = true;

注意：disabled属性会和enable和disable方法冲突，最后一个为准。

<html>

<title>index</title>

<head>

<meta charset="UTF-8">

    <script type="text/javascript" src="easyui/jquery.min.js"></script>

    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript" src="js/index.js"></script>

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

</head>

<body>

    <!--

    <div id="dd" class="easyui-droppable" options="accept:'#box,#pox'" style="width:600px;height:400px;background-color:black;">

    </div>

    -->

    <div id="dd" style="width:600px;height:400px;background-color:black;">

    </div>

    <div id="box" style="width:100px;height:100px;background:#ccc">

    内容

    </div>

</body>

</html>

$(function(){

    //$.fn.droppable.defaults.disabled = true;

    $("#dd").droppable({

        accept : "#box",

        //disabled : true,

        onDragEnter : function(e , source){

            //console.log(source);

            $(this).css("background","blue");

        //    alert(1);

        },

        //onDragOver : function(e , source){

            //$(this).css("background","orange");

            //alert(2);

        //},

        onDragLeave : function(e , source){

            $(this).css("background","red");

        },

        onDrop : function(e , source){

            $(this).css("background","orange");

        }

    });

    //$("#dd").droppable('disable');

    //$("#dd").droppable('enable');

    $("#box").draggable({

    });

    //console.log($("#dd").droppable('options'));

    //$("#dd").draggable("enable");

});

droppable放置组件的更多相关文章

  1. jQuery Easy UI Droppable(放置)组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

  2. 第一百九十四节，jQuery EasyUI，Droppable(放置)组件

    jQuery EasyUI,Droppable(放置)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方 ...

  3. Droppable(放置)组件

    ．加载方式 //class 加载方式 <div id="dd" class="easyui-droppable" data-options="a ...

  4. Droppable(放置组件)

    一.class加载方式 <div id="pop" class="easyui-droppable" style="width: 400px;h ...

  5. EasyUI系列学习(四)-Droppable(放置)

    一.创建组件 1.使用标签创建一个放置区 <div id="pox" class="easyui-droppable" style="width ...

  6. Tree( 树) 组件[4]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一．方法列表 //部分方法onClick : funct ...

  7. Tree( 树) 组件[3]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一． 事件列表很多事件的回调函数都包含'node'参数, ...

  8. Tree( 树) 组件[2]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一． 异步加载如果想从数据库里获取导航内容, 那么就必须 ...

  9. Tree( 树) 组件[1]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件. 一． 加载方式//class 加载方式<ul c ...

随机推荐

  1. C++——创建类的时候用new与不用new 的区别

    转自:https://www.cnblogs.com/tony-li/p/4111588.html C++在创建对象的时候可以采用两种方式:(例如类名为Test) Test test  或者 Test ...

  2. 从toString()方法到Object.prototype.toString.call()方法

    一.toString方法和Object.prototype.toSting.call()的区别 var arr=[1,2]; 直接对一个数组调用toString()方法, console.log(ar ...

  3. Docker---大型项目容器化改造

           虚拟化和容器化是项目云化不可避免的两个问题.虚拟化由于是纯平台操作,一个运行于linux操作系统的项目几乎不需要做任何改造就可以支持虚拟化.而项目如果要支持容器化则需要做许多细致的改造工 ...

  4. Calling Convention的总结

    因为经常需要和不同的Calling Convention打交道,前段时间整理了一下它们之间的区别,如下: 清理堆栈 参数压栈顺序 命名规则 (MSVC++) 备注 Cdecl 调用者 (Caller) ...

  5. Jquery10 高级事件

    学习要点: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one jQuery 不但封装了大量常用的事件处理,还提供了不少高级事件方便开发者使用.比如模拟用户触发事件.事件委托事件. ...

  6. 浅谈const限定符

    什么是const限定符? Const限定符是我们通常所说的常量限定符,被const修饰的对象具有常量性质,只能读,不能写. 为什么使用const限定符? 用const变量取代“魔数”,代码更容易理解和 ...

  7. django在windows设置定时任务，勉强能用

    推荐三篇文章 [Django]Django 定时任务实现(django-crontab+command) django中使用定时任务执行某些操作时的规范操作 windows配置crontab 前两篇文 ...

  8. .net 修改AD域中的密码

    1.通过vs 2013 新建一个web站点(不是空项目),这个会带一下模板, 2.然后新建一个页面UpdatePassWord.aspx aspx页面内容: <%@ Page Title=&qu ...

  9. 简单描述DataAdapter、DataReader、DataSet、Datatable对比

    一.存储的对比 DataReader 从数据库中检索[只读]数据流,存在客户端网络缓冲区,直到Read方法访问它们. DataAdapter 表示一组SQL命令和数据库连接,用于填充DateSet和[ ...

  10. python2.7.10 VS2015编译方法

    打开 Python-2.7.10\PCbuild目录 然后设置只编译python和pythoncore: 好了,编译试一试. 出现了好几个错误.由于 VS2015 取消了 timezone 的定义,改 ...