.加载方式

//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',

});

属性列表

Draggable 属性

//属性设置

$('#dd').droppable({

accept : '#box', disabled : true,

});

三.事件列表

PS:source 参数获取 DOM 元素

$('#dd').droppable({

accept : '#box', onDragOver : function (e, source) {

$(this).css('background', 'blue');

},

onDragEnter : function (e, source) {

$(this).css('background', 'orange');

},

onDragLeave : function (e, source) {

$(this).css('background', 'green');

},

onDrop : function (e, source) {

$(this).css('background', 'maroon');

},

});

//onDragEnter只触发一次,而Over会在不停地拖动中不停触发

//onDrop是放入到放置区,松开鼠标左键,丢下的操作

Droggable 方法

//返回属性对象

console.log($('#box').droggable('options'));

//禁止放置

$('#box').draggable('disable');

//启用放置
$('#box').draggable('enable');

PS:我们可以使用$.fn.droppable.defaults 重写默认值对象。

$.fn.droppable.defaults.disabled = true;

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="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. PL/SQL中的变量

    1.标量: ag1: declare v_ename emp.ename%type;--自己称为单变量 begin select ename into v_ename from emp where e ...

  2. Dapper事务操作

    1.报错信息: 如果分配给命令的连接位于本地挂起事务中,ExecuteNonQuery 要求命令拥有事务.命令的 Transaction 属性尚未初始化. 出现这种原因是在执行Execute语句时,没 ...

  3. SQL IN BETWEEN操作符

    IN 操作符 IN 操作符允许我们在 WHERE 子句中规定多个值. SQL IN 语法 SELECT column_name(s) FROM table_name WHERE column_name ...

  4. mobx react

    目录结构: Model/index.js 'use strict'; import { action, autorun, observable, computed } from "mobx& ...

  5. java rmi 使用方法

    server package Server; import java.rmi.Naming; import java.rmi.RMISecurityManager; import java.rmi.r ...

  6. Linux的/etc/issue、/etc/issue.net和/etc/motd的区别

    Linux使用这三个文件/etc/issue./etc/issue.net和/etc/motd 来控制本地及远程登录前后的信息显示,网上很多相互转载,说的都不清楚,自己实际测试了一下,结果记录如下: ...

  7. 禁止ios默认拉动弹性行为

    document.ontouchmove = function(e) { e.preventDefault();} /** 禁止ios默认拉动弹性行为**///屏蔽ios下浏览器滚动缓冲效果

  8. php global范例

    Example #1 $GLOBALS 范例 <?phpfunction test() {    $foo = "local variable"; echo '$foo in ...

  9. sitecore(key\value\language)的灵活应用

    1.当我们在做网站的时候是否会因为一个页面的文字变动来回改变.这样的麻烦sitecore都帮我们解决了. 2.sitecore分类key和value和语言几个维度.不同的key会因为不同的语言显示不同 ...

  10. Vxworks、QNX、Xenomai、Intime、Sylixos、Ucos等实时操作系统的性能特点

    Vxworks.QNX.Xenomai.Intime.Sylixos.Ucos等实时操作系统的性能特点 VxWorks操作系统 VxWorks 操作系统是美国WindRiver公司于1983年设计开发 ...