- 浏览: 209695 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
listen-raining:
你好。 我是这样写的: JButton b4=new ...
swing 初级学习(四)模式窗口取返回值 -
liu765023051:
灰常感谢~~
同一台机器上配置多个jboss应用服务器实例 -
Mr_Monotony:
为什么我按照这个写了不行啊?。。 只有自己才能看到信息。 而且 ...
Dwr推送技术学习 -
不过是过客:
太厉害了,IE上推送有问题,到处找,看到大哥这个试了一盘,没问 ...
Dwr推送技术学习
·概述
配合draggable插件,允许拖放到任何DOM元素内。
官方示例地址:http://jqueryui.com/demos/droppable/
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象
ui.draggable - 表示当前被拖拽的元素的JQuery对象
ui.helper - 表示当前被拖放的元素的JQuery对象
ui.position - 表示当前被拖拽的相对坐标值对象{top,left}
ui.offset - 表示当前被拖拽的元素的绝对坐标值对象{top,left}
·参数(参数名 : 参数类型 : 默认值)
accept : Selector, Function : '*'
仅允许符合适配器的元素激活拖放的事件。(如果是函数,则此函数会在页面上所有元素被调用,函数的返回值必须是布尔值。)
初始:$('.selector').droppable({ accept: '.special' });
获取:var accept = $('.selector').droppable('option', 'accept');
设置:$('.selector').droppable('option', 'accept', '.special');
activeClass : String : false
如果设置值,则当有拖拽事件发生时,为页面上所有允许(accept)的元素添加此样式。
初始:$('.selector').droppable({ activeClass: 'ui-state-highlight' });
获取:var activeClass = $('.selector').droppable('option', 'activeClass');
设置:$('.selector').droppable('option', 'activeClass', 'ui-state-highlight');
addClasses : Boolean : true
设置为false,可以阻止ui-droppable样式添加至可拖放的对象。(这样可以获取一定的性能优化)
初始:$('.selector').droppable({ addClasses: false });
获取:var addClasses = $('.selector').droppable('option', 'addClasses');
设置:$('.selector').droppable('option', 'addClasses', false);
greedy : Boolean : false
是否防止嵌套的droppable事件被传播。
初始:$('.selector').droppable({ greedy: true });
获取:var greedy = $('.selector').droppable('option', 'greedy');
设置:$('.selector').droppable('option', 'greedy', true);
hoverClass : String : false
当拖拽元素移至带有可拖放插件的元素上时,为元素添加指定的样式。
初始:$('.selector').droppable({ hoverClass: 'drophover' });
获取:var hoverClass = $('.selector').droppable('option', 'hoverClass');
设置:$('.selector').droppable('option', 'hoverClass', 'drophover');
scope : String : 'default'
设置元素只允许具有相同scope值拖拽元素激活此拖放元素。
初始:$('.selector').droppable({ scope: 'tasks' });
获取:var scope = $('.selector').droppable('option', 'scope');
设置:$('.selector').droppable('option', 'scope', 'tasks');
tolerance : String : 'intersect'
判断一个可拖拽元素被【放到】一个可拖放元素的判断模式。(可选值:'fit', 'intersect', 'pointer', 'touch')
fit:拖拽元素完全覆盖拖放元素
intersect:拖拽元素至少50%覆盖拖放元素
pointer:鼠标指针重叠在可拖放元素上
touch:只要有任何重叠即发生
初始:$('.selector').droppable({ tolerance: 'fit' });
获取:var tolerance = $('.selector').droppable('option', 'tolerance');
设置:$('.selector').droppable('option', 'tolerance', 'fit');
·事件
activate
当任何可拖拽元素开始拖拽动作时激活此事件。
初始:$('.selector').droppable({ activate: function(event, ui) { ... } });
绑定:$('.selector').bind('dropactivate', function(event, ui) { ... });
deactivate
当任何可拖拽元素停止拖拽动作时激活此事件。
初始:$('.selector').droppable({ deactivate: function(event, ui) { ... } });
绑定:$('.selector').bind('dropdeactivate', function(event, ui) { ... });
over
当一个被允许(accept)的可拖拽元素移动并覆盖可拖放元素时激活。
初始:$('.selector').droppable({ over: function(event, ui) { ... } });
绑定:$('.selector').bind('dropover', function(event, ui) { ... });
out
当一个被允许(accept)的可拖拽元素移出可拖放元素时激活。
初始:$('.selector').droppable({ out: function(event, ui) { ... } });
绑定:$('.selector').bind('dropout', function(event, ui) { ... });
drop
当一个被允许(accept)的可拖拽元素移动并覆盖可拖放元素,松开鼠标时激活。
初始:$('.selector').droppable({ drop: function(event, ui) { ... } });
绑定:$('.selector').bind('drop', function(event, ui) { ... });
·方法
destory
从元素中移除拖拽功能。
用法:.droppable( 'destroy' )
disable
禁用元素的拖拽功能。
用法:.droppable( 'disable' )
enable
启用元素的拖拽功能。
用法:.droppable( 'enable' )
option
获取或设置元素的参数。
用法:.droppable( 'option' , optionName , [value] )
配合draggable插件,允许拖放到任何DOM元素内。
官方示例地址:http://jqueryui.com/demos/droppable/
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象
ui.draggable - 表示当前被拖拽的元素的JQuery对象
ui.helper - 表示当前被拖放的元素的JQuery对象
ui.position - 表示当前被拖拽的相对坐标值对象{top,left}
ui.offset - 表示当前被拖拽的元素的绝对坐标值对象{top,left}
·参数(参数名 : 参数类型 : 默认值)
accept : Selector, Function : '*'
仅允许符合适配器的元素激活拖放的事件。(如果是函数,则此函数会在页面上所有元素被调用,函数的返回值必须是布尔值。)
初始:$('.selector').droppable({ accept: '.special' });
获取:var accept = $('.selector').droppable('option', 'accept');
设置:$('.selector').droppable('option', 'accept', '.special');
activeClass : String : false
如果设置值,则当有拖拽事件发生时,为页面上所有允许(accept)的元素添加此样式。
初始:$('.selector').droppable({ activeClass: 'ui-state-highlight' });
获取:var activeClass = $('.selector').droppable('option', 'activeClass');
设置:$('.selector').droppable('option', 'activeClass', 'ui-state-highlight');
addClasses : Boolean : true
设置为false,可以阻止ui-droppable样式添加至可拖放的对象。(这样可以获取一定的性能优化)
初始:$('.selector').droppable({ addClasses: false });
获取:var addClasses = $('.selector').droppable('option', 'addClasses');
设置:$('.selector').droppable('option', 'addClasses', false);
greedy : Boolean : false
是否防止嵌套的droppable事件被传播。
初始:$('.selector').droppable({ greedy: true });
获取:var greedy = $('.selector').droppable('option', 'greedy');
设置:$('.selector').droppable('option', 'greedy', true);
hoverClass : String : false
当拖拽元素移至带有可拖放插件的元素上时,为元素添加指定的样式。
初始:$('.selector').droppable({ hoverClass: 'drophover' });
获取:var hoverClass = $('.selector').droppable('option', 'hoverClass');
设置:$('.selector').droppable('option', 'hoverClass', 'drophover');
scope : String : 'default'
设置元素只允许具有相同scope值拖拽元素激活此拖放元素。
初始:$('.selector').droppable({ scope: 'tasks' });
获取:var scope = $('.selector').droppable('option', 'scope');
设置:$('.selector').droppable('option', 'scope', 'tasks');
tolerance : String : 'intersect'
判断一个可拖拽元素被【放到】一个可拖放元素的判断模式。(可选值:'fit', 'intersect', 'pointer', 'touch')
fit:拖拽元素完全覆盖拖放元素
intersect:拖拽元素至少50%覆盖拖放元素
pointer:鼠标指针重叠在可拖放元素上
touch:只要有任何重叠即发生
初始:$('.selector').droppable({ tolerance: 'fit' });
获取:var tolerance = $('.selector').droppable('option', 'tolerance');
设置:$('.selector').droppable('option', 'tolerance', 'fit');
·事件
activate
当任何可拖拽元素开始拖拽动作时激活此事件。
初始:$('.selector').droppable({ activate: function(event, ui) { ... } });
绑定:$('.selector').bind('dropactivate', function(event, ui) { ... });
deactivate
当任何可拖拽元素停止拖拽动作时激活此事件。
初始:$('.selector').droppable({ deactivate: function(event, ui) { ... } });
绑定:$('.selector').bind('dropdeactivate', function(event, ui) { ... });
over
当一个被允许(accept)的可拖拽元素移动并覆盖可拖放元素时激活。
初始:$('.selector').droppable({ over: function(event, ui) { ... } });
绑定:$('.selector').bind('dropover', function(event, ui) { ... });
out
当一个被允许(accept)的可拖拽元素移出可拖放元素时激活。
初始:$('.selector').droppable({ out: function(event, ui) { ... } });
绑定:$('.selector').bind('dropout', function(event, ui) { ... });
drop
当一个被允许(accept)的可拖拽元素移动并覆盖可拖放元素,松开鼠标时激活。
初始:$('.selector').droppable({ drop: function(event, ui) { ... } });
绑定:$('.selector').bind('drop', function(event, ui) { ... });
·方法
destory
从元素中移除拖拽功能。
用法:.droppable( 'destroy' )
disable
禁用元素的拖拽功能。
用法:.droppable( 'disable' )
enable
启用元素的拖拽功能。
用法:.droppable( 'enable' )
option
获取或设置元素的参数。
用法:.droppable( 'option' , optionName , [value] )
发表评论
-
jquery ui drap
2012-02-21 16:02 1051[原文翻译] JQuery UI Draggable插件用来使 ... -
js读写COOKIE
2012-02-15 13:55 1473js实现记住帐号或密码(js读写COOKIE) ... -
JS中获取request的值,非常好用的JS代码
2012-02-15 13:50 11073JS中获取request的值,非常好用的JS代码 项目中 ... -
js math
2010-08-10 11:48 2187.丢弃小数部分,保留整 ... -
ajax 再学习(三)简单示例
2010-07-13 11:31 849实现简单流程,需要2步: 1、ajaxTest.htm ... -
ajax 再学习(二)
2010-07-13 11:06 943XMLHttpRequest对象的三个属性: 1、on ... -
ajax 再学习(一)
2010-07-13 11:01 853//根据不同的浏览器创建相应的XMLHttpRequest对象 ... -
js
2010-07-12 17:42 861<!DOCTYPE HTML PUBLIC " ... -
js radio(一)
2010-04-08 20:04 1320取页面的值 <script> f ... -
js 控制 Windows Media Player
2010-02-19 19:27 6070Windows Media Player html: &l ... -
DWR 传递数组、MAP参数
2010-01-06 16:15 3232js部分: function aa(){ ... -
js 计算器(二)
2009-12-21 11:18 973简单实现基本运算 <%@ page langua ... -
js 计算器
2009-12-21 11:17 1307科学计算器 <%@ page language= ... -
window open
2009-12-10 15:25 885window.open("*.jsp",& ... -
IE功能汇集(三)
2009-12-10 14:13 848<body><SCRIPT LANGUA ... -
IE功能汇集(二)
2009-12-10 14:12 970鼠标自定义 <script language ... -
IE功能汇集(一)
2009-12-10 14:11 840其实这篇文章我在asp版 ... -
打开服务器上的文件
2009-12-01 14:25 971<script type="text/java ... -
jsewweweew
2009-11-25 15:22 690<% pageContext.setAttribute( ... -
js 文件夹选择框(三)
2009-11-20 16:40 2003本文来自:Web技术之家(www.waweb.cn ...
相关推荐
《jQuery UI 1.8.18 自定义插件与CSS详解》 jQuery UI 是一个基于 jQuery 库的用户界面库,它提供了丰富的交互效果、可定制的主题以及各种UI组件,如日期选择器、对话框、滑块等。在本篇文章中,我们将深入探讨其...
**jQuery UI 拖拽拖放插件:jquery.top-droppable** 在Web开发中,交互性和用户体验至关重要,而拖放功能(Drag and Drop)是提升用户体验的一种有效方式。jQuery UI是一个强大的JavaScript库,提供了丰富的用户...
**jQuery UI 深度解析** jQuery UI 是一个基于广泛使用的 JavaScript 库 jQuery 的扩展,它为开发者提供了丰富的用户界面组件和交互效果。这个名为 "jquery-ui-1.10.4.custom" 的压缩包文件,很显然是一个自定义...
《jQuery UI 1.10.0 自定义版本详解》 jQuery UI 是一个基于 jQuery JavaScript 库的可扩展用户界面库。它提供了多种交互控件、可拖动、可排序的元素、日期选择器、对话框、滑块、菜单等丰富的功能,极大地简化了...
《jQuery UI与jQuery UI Rails整合应用详解》 在Web开发领域,jQuery UI和Rails框架的结合使用能够构建出功能丰富、交互性强的用户界面。本文将深入探讨如何将这两个强大的工具集结合,以提升Web应用的用户体验。 ...
1. **jQuery UI组件**:jQuery UI包含了多种组件,如日期选择器(Datepicker)、对话框(Dialog)、拖放(Draggable)、可排序(Sortable)、可叠放(Droppable)、滑块(Slider)、进度条(Progressbar)、菜单(Menu)等。...
《jQuery UI 1.10.3 自定义版本:深入理解和应用》 jQuery UI 是一个基于 jQuery JavaScript 库的交互式用户界面组件集合,它提供了一系列丰富的、可自定义的界面元素,如对话框、拖放功能、日期选择器、滑块等。本...
jQuery UI 的组件包括但不限于:对话框(Dialog)、下拉菜单(Menu)、滑块(Slider)、进度条(Progressbar)、日期选择器(Datepicker)、拖放(Draggable & Droppable)等。通过这些组件,开发者可以轻松构建交互...
《jQuery UI 1.10.1 自定义版本详解》 jQuery UI 是一个基于 jQuery JavaScript 库的可扩展用户界面库。它提供了多种可交互的组件、特效和主题,为Web开发者提供了创建丰富且易用的用户界面的强大工具。本文将深入...
《jQuery UI 1.11.0 自定义版本详解》 jQuery UI 是一个基于 jQuery JavaScript 库的可扩展用户界面库。它提供了多种组件、效果、主题和交互性功能,帮助开发者构建美观、易用的网页应用。在“jquery-ui-1.11.0....
《jQuery UI 1.10.3:打造高效Web界面的实用工具库》 jQuery UI是基于jQuery JavaScript库的一个扩展,它提供了一整套可定制的用户界面组件,包括交互式控件、视觉效果和主题系统,使得Web开发者能够轻松构建用户...
在“前端项目-jqueryui-touch-punch”这个项目中,包含的文件可能是jQuery UI Touch Punch的源码或示例。通过解压并研究这个项目,你可以了解到如何将这两个工具结合到自己的Web应用中,以提供兼容触摸设备的用户...
`jQuery top-droppable`插件是基于流行的jQuery UI库的一个扩展,专为实现高效、灵活的拖放操作而设计。这个插件允许开发者轻松地创建可拖动的元素,并将它们放置到预定义的可接受目标(或称为“drop zones”)中,...
《jQuery UI 1.11.4完整版详解》 jQuery UI 是一款基于JavaScript库jQuery的用户界面插件集合,提供了丰富的交互效果和可自定义的主题。本文将深入解析jQuery UI 1.11.4这个版本,涵盖其核心功能、组件、应用场景...
其中,JavaScript文件分为多个模块,如"draggable.js"、"droppable.js"等,每个模块负责特定的UI功能。开发者可以根据需要选择引入哪些模块,以减小页面加载的负担。 最后,"js"目录可能包含了对jQuery UI库的额外...
《jQuery UI 1.12.1 自定义版本详解》 jQuery UI 是一个基于 jQuery JavaScript 库的可扩展用户界面工具集,它提供了一系列丰富的交互式组件和视觉效果,为Web开发人员创建功能丰富的交互式界面提供了极大的便利。...
《jQuery UI 1.9.2 Custom:打造个性化的用户界面》 jQuery UI 是一个基于 jQuery JavaScript 库的开源项目,它提供了一系列可交互、可定制的用户界面组件,包括日期选择器、对话框、拖放功能、排序列表等。在标题...
1. `ui` 文件夹:包含了所有jQuery UI的源代码,如`ui.core.js`, `ui.widget.js`等基础组件,以及`ui.draggable.js`, `ui.droppable.js`等具体交互效果的实现。 2. `themes` 文件夹:存放了各种预设主题,开发者可以...
其他如`ui.draggable.js`, `ui.droppable.js`等则是具体的交互组件。 - **themes** 子文件夹:存放了不同主题的CSS文件,每个主题都有自己的样式,可以快速改变整个应用的外观。例如,经典的"smoothness"主题就...