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. PreparedStatement和Statement区别详解

    技术原理 该 PreparedStatement接口继承Statement,并与之在两方面有所不同: PreparedStatement 实例包含已编译的 SQL 语句.这就是使语句“准备好”.包含于 ...

  2. JS正则表达式从入门到入土（6）—— 贪婪模式与非贪婪模式

    贪婪模式 之前说了正则的量词,但是量词会带来一个到底该匹配哪个的问题. 如下正则表达式: \d{3,6} 这个正则表达式是匹配3到6个数字,但是当这个正则表达式被用来匹配12345678这个字符串,到 ...

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

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

  4. 如何禁止ping

    PING命令是个危险的命令,用它可以知道你的操作系统,IP等,为了安全禁PING是个很好的方法,也是防DDOS攻击的.应该是有外部网络试图连接你的UDP的1434端口,不知道你打了补丁没有. 黑客入侵 ...

  5. JavaScript 数据类型小结

    数据类型对于机器而言,其意义在于更加合理的分配内存空间,而对于编程者而言,数据类型提供了我们相对应的一系列方法,对数据进行分析与处理. 在本文中,将对JavaScript数据类型的基础知识进行总结,全 ...

  6. springboot2.1.3集成webservice及错误No operation was found with the name {...}解决办法

    1.项目使用springboot 2.1.3版本,集成webservice使用的依赖如下 <parent> <groupId>org.springframework.boot& ...

  7. BZOJ 2761: [JLOI2011]不重复数字 hash哈希

    题目就不贴了 点我看题 题意:这题题意很简明,就是给一个序列,把序列里相同的删掉,然后输出,按原数列顺序. 思路:这题之前QZZ和ZN大神犇叫我去做,辣时还不会hash,就留着了.最近某夏令营学会了h ...

  8. 【ML数学知识】极大似然估计

    它是建立在极大似然原理的基础上的一个统计方法,极大似然原理的直观想法是,一个随机试验如有若干个可能的结果A,B,C,... ,若在一次试验中,结果A出现了,那么可以认为实验条件对A的出现有利,也即出现 ...

  9. 8条规则图解JavaScript原型链继承原理

    原形链是JS难点之一,而且很多书都喜欢用一大堆的文字解释给你听什么什么是原型链,就算有图配上讲解,有的图也是点到为止,很难让人不产生疑惑. 我们先来看一段程序,友情提示sublimeText看更爽: ...

  10. MAC OS 命令行使用详解【转】

    你可以整天驾驶汽车而不用知道如何修理它们,但是如果你希望当一个维护员,你就需要知道事情是如何运作的.同样的事情也发生在了 Mac OS X 上:你可以一直使用 Mac 而不用知道如何修理它,但是如果你 ...