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. Spring MVC 知识总结

    参考文章:http://www.oschina.net/question/84460_9608 孔浩视频 1. 几个关键类: RequestMappingHandlerMapping 和 Reques ...

  2. 读写文件时0A转化为0D 0A

    转自:http://www.cnblogs.com/congdiaodiao/p/4529785.html 用C++写东西,需要往文件里写数据,很简单的代码,大概是这个样子: #include < ...

  3. 20145328 《Java程序设计》课程总结

    20145328 <Java程序设计>课程总结 每周学习总结链接汇总 20145328 <Java程序设计>第0周学习总结 20145328 <Java程序设计>第 ...

  4. Spring IOC 源码解析（持续）

    如何查看源码 Spring源码下载https://github.com/spring-projects/spring-framework/tags?after=v3.1.0.RC1 eclipse关联 ...

  5. 【目标检测】Cascade R-CNN 论文解析

    目录 0. 论文链接 1. 概述 2. 网络结构的合理性 3. 网络结构 4. 参考链接 @ 0. 论文链接 Cascade R-CNN 1. 概述   这是CVPR 2018的一篇文章,这篇文章也为 ...

  6. mybatis的操作数据库基础

    1.domain类 package com.xiaostudy.mybatis.domain; /** * @desc domain类 * @author xiaostudy * */ public ...

  7. 虚拟机 Ubuntu18.04 tensorflow cpu 版本

    虚拟机 Ubuntu18.04 tensorflow cpu 版本 虚拟机VMware 配置: 20G容量,可扩充 2G内存,可扩充 网络采用NAT模式 平台:win10下的Ubuntu18.04 出 ...

  8. 解题报告：hdu1159 common consequence LCS裸题

    2017-09-02 17:07:42 writer:pprp 通过这个题温习了一下刚学的LCS 代码如下: /* @theme:hdu1159 @writer:pprp @begin:17:01 @ ...

  9. PHP 操控微信公众号

    <?php class AutoAction extends CommonAction { public function index() { $timestamp = $_GET['times ...

  10. Angular单元测试系列

    Angular单元测试系列 - 大纲Angular单元测试系列 - 简介Angular单元测试系列 - 如何使用Jasmine进行Angular单元测试Angular单元测试系列 - Router.C ...