一、class加载方式

<div id="pop" class="easyui-droppable" style="width: 400px;height: 300px;background-color: powderblue"></div>

二、js加载方式

$("#pop").droppable({})

三、关于Droppable的属性、事件、方法

$("#pop").droppable({

//属性
      accept:"#box", //值为selector 确定哪些元素被接受 默认为 null
     disabled:true , //,如果为 true,则禁止放置 默认为 false
  //事件
     onDragOver:function (e,source) {$(this).css('background', 'blue')},// 在被拖拽元 素经过放置区的时候触发
     onDragEnter:function () {} , //在被拖拽元素到放置区内,左键未松开的时候触发
     onDragLeave : function (e, source) {}, 在被拖拽元素离开放置区的时候触发
     onDrop : function (e, source) {}在被拖拽元素放入到放置区的时候触发
});
//方法
    //返回属性对象 $('#box').droppable('options');
   //禁止放置 $('#box').draggable('disable');
  //启用放置 $('#box').draggable('enable');

四、可以使用重写默认值对象。​ $.fn.droppable.defaults.disabled = true;

*ps:一般和draggable配合使用

Droppable(放置组件)的更多相关文章

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

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

  2. droppable放置组件

    Droppable 放置组件 所谓放置,就将一个事物入一个事物内触发各种效果,这个组件不依赖于其他组件.1.加载方式 //class 调用 <div id="dd" clas ...

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

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

  4. Droppable(放置)组件

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

  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++求中位数

    #include <iostream> #include <cassert> #include <stack> #include <math.h> us ...

  2. kafka2.3集群搭建

    环境: 3台centos7.4 3台zookeeper3.4.14 1. wget http://mirror.bit.edu.cn/apache/kafka/2.3.0/kafka_2.11-2.3 ...

  3. rabbiitmq非阻塞调用

    https://blog.csdn.net/panxianzhan/article/details/50755409 https://blog.csdn.net/u013946356/article/ ...

  4. javascript 回到顶部效果的实现

    demo.js window.onload=function() { var timer=null; var obtn=document.getElementById('btn'); var isTo ...

  5. bzoj1495 [NOI2006]网络收费 复杂度分析+树上背包

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=1495 题解 通过观察可以发现,对于一个 \(lca\),如果 \(nA \leq nB\),那 ...

  6. CPU缓存

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11520840.html 由于CPU发展的速度远快于内存的发展,CPU的处理速度就比内存的访问速度快得多 ...

  7. 验证码生成(servlet)

    一 效果如下: 二 java 代码如下: import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import j ...

  8. Jmeter性能测试,使用ServerAgent监控服务端性能指标

    一.jmeter1.下载JMeter Plugins Manager.jar放到你的jmeter\lib\ext目录下2.启动jmeter,进入Plugins Manager找到perfmon安装这个 ...

  9. 如何在pycharm上创建分支,并且把它推送到远端仓库

    注意创建的分支名 ,如果远端仓库没有pycharm中创建的分支名时  此时远端仓库会创建一个分支出来 这是就方便了代码的管理 具体步骤如下图操作步骤 推送上去搞定

  10. MYSQL索引优化之单表示例

    1. 创建表 CREATE TABLE IF NOT EXISTS `article` ( `id` BIGINT(10) NOT NULL AUTO_INCREMENT, `author_id` I ...