一、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. Codeforces 963B Destruction of a Tree 思维+dfs

    题目大意: 给出一棵树,每次只能摧毁有偶数个度的节点,摧毁该节点后所有该节点连着的边都摧毁,判断一棵树能否被摧毁,若能,按顺序输出摧毁的点,如果有多种顺序,输出一种即可 基本思路: 1)我一开始自然而 ...

  2. create-react-app按需引入antd-mobile

    1.引入 react-app-rewired 并修改 package.json 里的启动配置: npm i react-app-rewired@2.0.2-next.0 // 需要安装低版本 否则np ...

  3. mybatis源码分析之06二级缓存

    上一篇整合redis框架作为mybatis的二级缓存, 该篇从源码角度去分析mybatis是如何做到的. 通过上一篇文章知道,整合redis时需要在FemaleMapper.xml中添加如下配置 &l ...

  4. spring-boot整合mongodb多数据源的案例

    1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.GITHUB地址 https://github.com/nbfujx/springBo ...

  5. PHP curl_getinfo函数

    curl_getinfo — 获取一个cURL连接资源句柄的信息 说明 mixed curl_getinfo ( resource $ch [, int $opt = 0 ] ) 获取最后一次传输的相 ...

  6. window系统命令cmd有哪些?

    CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本.文件系统版本)chcp 修改默认字符集chcp 936默认中文chcp 650011. appwiz.c ...

  7. BZOJ 2741: 【FOTILE模拟赛】L(可持久化Trie+分块)

    传送门 解题思路 首先求出前缀异或和,那么问题就转化成了区间内选两个数使得其异或和最大.数据范围不是很大考虑分块,设\(f[x][i]\)表示第\(x\)块开头到\(i\)这个位置与\(a[i]\)异 ...

  8. centos挂载移动硬盘ntfs-3g

    yum install ntfs-3g sudo mount -t ntfs-3g /dev/sdc1 /mnt/mobiledisk https://tuxera.com/opensource/nt ...

  9. 老牌激活工具– Microsoft Toolkit 2.4.3 + 详细图文教程【转】

    老牌激活工具-- Microsoft Toolkit 2.4.3 + 详细图文教程 windowsToolkit是一个一键激活MS Office 2010的工具.原理就是利用KMS来激活,不是新的激活 ...

  10. centosifcfg-eth0文件内容为空

    虚拟机安装好CentOS 6系统后,发现ip在每次重启后都会还原,用ifconfig查看是有eth0网卡的(也有可能只有回环网卡lo),于是查看eth0网卡配置文件,发现在 /etc/sysconfi ...