Droppable(放置)组件
.加载方式
//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(放置)组件的更多相关文章
- jQuery Easy UI Droppable(放置)组件
Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...
- droppable放置组件
Droppable 放置组件 所谓放置,就将一个事物入一个事物内触发各种效果,这个组件不依赖于其他组件.1.加载方式 //class 调用 <div id="dd" clas ...
- 第一百九十四节,jQuery EasyUI,Droppable(放置)组件
jQuery EasyUI,Droppable(放置)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方 ...
- Droppable(放置组件)
一.class加载方式 <div id="pop" class="easyui-droppable" style="width: 400px;h ...
- EasyUI系列学习(四)-Droppable(放置)
一.创建组件 1.使用标签创建一个放置区 <div id="pox" class="easyui-droppable" style="width ...
- Tree( 树) 组件[4]
本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一.方法列表 //部分方法onClick : funct ...
- Tree( 树) 组件[3]
本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一. 事件列表很多事件的回调函数都包含'node'参数, ...
- Tree( 树) 组件[2]
本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一. 异步加载如果想从数据库里获取导航内容, 那么就必须 ...
- Tree( 树) 组件[1]
本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件. 一. 加载方式//class 加载方式<ul c ...
随机推荐
- PL/SQL中的变量
1.标量: ag1: declare v_ename emp.ename%type;--自己称为单变量 begin select ename into v_ename from emp where e ...
- Dapper事务操作
1.报错信息: 如果分配给命令的连接位于本地挂起事务中,ExecuteNonQuery 要求命令拥有事务.命令的 Transaction 属性尚未初始化. 出现这种原因是在执行Execute语句时,没 ...
- SQL IN BETWEEN操作符
IN 操作符 IN 操作符允许我们在 WHERE 子句中规定多个值. SQL IN 语法 SELECT column_name(s) FROM table_name WHERE column_name ...
- mobx react
目录结构: Model/index.js 'use strict'; import { action, autorun, observable, computed } from "mobx& ...
- java rmi 使用方法
server package Server; import java.rmi.Naming; import java.rmi.RMISecurityManager; import java.rmi.r ...
- Linux的/etc/issue、/etc/issue.net和/etc/motd的区别
Linux使用这三个文件/etc/issue./etc/issue.net和/etc/motd 来控制本地及远程登录前后的信息显示,网上很多相互转载,说的都不清楚,自己实际测试了一下,结果记录如下: ...
- 禁止ios默认拉动弹性行为
document.ontouchmove = function(e) { e.preventDefault();} /** 禁止ios默认拉动弹性行为**///屏蔽ios下浏览器滚动缓冲效果
- php global范例
Example #1 $GLOBALS 范例 <?phpfunction test() { $foo = "local variable"; echo '$foo in ...
- sitecore(key\value\language)的灵活应用
1.当我们在做网站的时候是否会因为一个页面的文字变动来回改变.这样的麻烦sitecore都帮我们解决了. 2.sitecore分类key和value和语言几个维度.不同的key会因为不同的语言显示不同 ...
- Vxworks、QNX、Xenomai、Intime、Sylixos、Ucos等实时操作系统的性能特点
Vxworks.QNX.Xenomai.Intime.Sylixos.Ucos等实时操作系统的性能特点 VxWorks操作系统 VxWorks 操作系统是美国WindRiver公司于1983年设计开发 ...