一、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. 二、TortoiseSVN 合并、打分支、合并分支、切换分支

    一.合并 点击Edit conflict来编辑冲突: 在合并后的枝干对应栏中编辑后,Save保存后关闭. 二.TortoiseSVN 打分支.合并分支.切换分支 1.SVN打分支 方式一:先检出,再打 ...

  2. docker初学

    Docker基础知识 1. Docker基础知识点 1.1 什么是Docker Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.(集装箱原理) 1.2 什 ...

  3. java泛型通配符详解

    前言 泛型带来的好处 泛型中通配符 常用的 T,E,K,V,? ?无界通配符 上界通配符 < ? extends E> 下界通配符 < ? super E> ?和 T 的区别 ...

  4. mongodb 自增序列实现

    MongoDB没有像SQL数据库外开箱即用自动递增功能.默认情况下,它采用了12字节的ObjectId为_id字段作为主键来唯一地标识文档.然而,可能存在的情况,我们可能希望_id字段有一些其它的自动 ...

  5. VTF/AMROC安装指南

    平台 Ubuntu 16.04. 准备工作 安装gfortran 和openmpi sudo apt-get install gfortran sudo apt-get install openmpi ...

  6. 【leetcode】1022. Smallest Integer Divisible by K

    题目如下: Given a positive integer K, you need find the smallest positive integer N such that N is divis ...

  7. html标签<td><tr><th>全称及缩写说明

    <td> 是table data cell 的缩写,单元格 <tr> 是table row 的缩写,表格中的一行 <th> 是table header cell 的 ...

  8. node js 操作redis promise

    连接 redis = require('redis') var client = redis.createClient('6379', '127.0.0.1'); client.on('connect ...

  9. 【GDAL】GDAL栅格数据结构学习笔记(一): 关于Metadata

    在维护一段代码时看到前任程序员写的获取栅格数据的CellSize的功能,竟然在知道GDAL的情况下去调用AE的接口来解算,觉得费解. 原来的思路是使用AE的Raster对象读取出Raster的文件大小 ...

  10. iOS OpenGL ES简单绘制纹理

    OpenGL 中任何复杂的图形都是由点,线 和三角形组成的. 那么一个矩形 就需要有两个三角形组成. 纹理, 可以理解为一张图片, 我么可以将整张or部分图片绘制到圆形, 矩形等目标图形中. 下图表示 ...