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. Netflix Hystrix — 应对复杂分布式系统中的延时和故障容错 转

    转自 https://segmentfault.com/a/1190000005988895 前言 分布式系统中经常会出现某个基础服务不可用造成整个系统不可用的情况, 这种现象被称为服务雪崩效应. 为 ...

  2. Python开篇——Python的哲学

    今天奉上Python设计哲学,宣告着自己正式开始系统的学习Python The Zen of Python, by Tim Peters Beautiful is better than ugly.E ...

  3. Linux进程管理 lsof命令：列出进程调用或打开的文件信息

    lsof命令 通过 ps 命令查询到系统中所有的进程, 通过lsof 命令可以知道这个进程到底在调用哪些文件.lsof 命令格式如下: [root@localhost ~]# lsof [选项] 选项 ...

  4. PHP SQL写法 积累(注：PHPSQL与LINQ SQL相似)

    1: $data ['parentid'] = $pid; M('menu')->where($data)->order(' id asc  ')-> select();   // ...

  5. Java硬件同步机制Swap指令模拟+记录型信号量模拟

    学校实验存档//.. 以经典的生产者消费者问题作为背景. 进程同步方式接口: package method; /** * P表示通过,V表示释放 */ public interface Method ...

  6. go panic recover 异常处理

    Go语言追求简洁优雅,所以,Go语言不支持传统的 try…catch…finally 这种异常,因为Go语言的设计者们认为,将异常与控制结构混在一起会很容易使得代码变得混乱.因为开发者很容易滥用异常, ...

  7. hello　java　！

    我对于计算机性编程性质的课程一直没有很好的悟性,但功夫不服有心,最近自己学习视频课程,随时关注娄老师的博客,慢慢的对于java编程有了新的认识,也用eclipse软件进行了简单java的编译. 了解的 ...

  8. MR案例：基站相关01

    字段解释: product_no:用户手机号: lac_id:用户所在基站: start_time:用户在此基站的开始时间: staytime:用户在此基站的逗留时间. product_no lac_ ...

  9. 教你如何挑选深度学习GPU【转】

    本文转载自:https://blog.csdn.net/qq_38906523/article/details/78730158 即将进入 2018 年,随着硬件的更新换代,越来越多的机器学习从业者又 ...

  10. 编解码技术：I帧与IDR帧的区别总结

    编解码技术:I帧与IDR帧的区别总结 DR(Instantaneous Decoding Refresh)--即时解码刷新. I帧与IDR帧的相同点在于: 1.I和IDR帧都是使用帧内预测的: 2.都 ...