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. OpenVPN GUI出现CreateProcess错误的解决方法

    问题描述     启动 OpenVPN GUI 时失败,提示“CreateProcess Failed, exe=’X:\XXXXX\OpenVPN\bin\openvpn.exe’ cmdline= ...

  2. 特性（property）/静态方法（staticmethod）/类方法（classmethod）/__str__的用法

    property是一种特殊的属性,访问它时会执行一段功能(函数)然后返回值 1 import math 2 class Circle: 3 def __init__(self,radius): #圆的 ...

  3. mysql-community-server安装完后不知道root密码

    修改方法: service mysqld stop mysqld_safe --skip-grant-tables & mysql -u root use mysql; update user ...

  4. M4中遇到的问题

    MDK5的安装以及破解 这里遇到了一个问题,PDF上并没有扯个界面我就先截了个图然后点安装,后来看来这其中并没有什么问题 在这里就会出现卡死的情况,也就是说并不能从这个界面上下载两个相应的安装包 在M ...

  5. zabbix_server.log大量提示cannot send list of active checks to "IP": host [HostName] not found

    zabbix server 日志大量提示上图信息 原因是 zabbix_agent.conf配置文件中配置的HostName与zabbix的web界面配置的不同导致的 zabbix_agent.con ...

  6. Docker pull网络错误

    [root@Oracle ~]# docker search centos Error response from daemon: Get https://index.docker.io/v1/sea ...

  7. Codeforces Round #365 (Div. 2) B - Mishka and trip

    http://codeforces.com/contest/703/problem/B 题意: 每个点都有一个值,每条边的权值为这两个点相乘.1~n成环.现在有k个城市,城市与其他所有点都相连,计算出 ...

  8. WinCE数据通讯之Web Service分包传输篇

    前面写过<WinCE数据通讯之Web Service篇>那篇对于数据量不是很大的情况下单包传输是可以了,但是对于大数据量的情况下WinCE终端的内存往往会在解包或者接受数据时产生内存溢出. ...

  9. Python基础笔记系列十二：requests模块的简单应用

    本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! httpbin httpbin这个网站能测试 HTTP 请求和响应的各种信 ...

  10. 解决httpclient请求响应压缩文本乱码问题

    最近在调用京东的获取省份接口老是中文乱码,加了utf-8也没有用.最后在httpclient打的日志中有Content-Encoding:gzip信息,最后在请求header里加上: reqHeade ...