- 浏览: 636561 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (314)
- 生活 (2)
- c# (37)
- 技术 (3)
- 400电话 (0)
- 400常见问题 (0)
- 400资费 (0)
- html (7)
- css (0)
- 数据库 (7)
- javascript (16)
- php (33)
- asp.net mvc2 (10)
- mysql (9)
- C# 3.0 LinQ (10)
- vs2005或vs2008 (4)
- flash and as3 (7)
- fms (1)
- dedeCMS (11)
- java (33)
- j2me (1)
- swing (1)
- c++ (1)
- jquery easyui (3)
- jquery (5)
- android (29)
- MongoDB (9)
- VtigerCRM (1)
- test (0)
- linux (30)
- nutch (2)
- SqlServer数据库 (2)
- 数据检索 (2)
- java抓取 (11)
- 乐天 (1)
- 淘宝 (1)
- Silverlight4.0 (6)
- sphinx实时索引 (5)
- ecshop (9)
- codeigniter(CI) (3)
- axure6 (1)
- 京东店铺装修教程 (2)
- xpath (1)
- joomla (2)
- bpm (1)
- Bootstrap (2)
- knockout (4)
- ecstore (4)
- css3 (1)
- 微信 (2)
- dede (0)
- soa_edi (1)
- odoo (0)
- web (1)
最新评论
-
骑着蜗牛超F1:
在ie6下报了个stack overflow at line ...
兼容ie6和ie7 的16进制码流在html中显示为图片代码(base64) -
冰之海洋:
好像少了一句代码吧? FloatingFunc.show(th ...
android 一直在最前面的浮动窗口效果 -
yanzhoupuzhang:
连接有问题!
iis7.0官方下载 IIS 7.0(微软Web服务器组件IIS 7.0) 官方(windows 2003,XP,2000) -
whatable:
唉,楼主你都没有搞清楚重量级和轻量级。。。。既然引用了SWT, ...
java swing 内置浏览器打开网页显示flash图表-swt Browser应用 -
yy_owen:
我晕啊,你链接的什么内容额,我要的iis,你链接个视频什么意思 ...
iis7.0官方下载 IIS 7.0(微软Web服务器组件IIS 7.0) 官方(windows 2003,XP,2000)
Query UI是JQuery官方支持的WebUI 代码库,包含底层交互、动画、特效等API,并且封装了一些Web小部件(Widget)。同时,JQuery UI继承了jquery的插件支持,有大量的第三方插件可以丰富JQuery UI的功能。
JQuery UI提供的API极大简化了拖拽功能的开发。只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可。
拖拽原理
首先要明确几个概念。
ource:拖拽源,要拖动的元素。
taerget:拖放目标,能够放入source的容器。
拖拽的动作分解如下:
1. drag start:在拖拽源(source)上按下鼠标并开始移动
2. drag move: 移动过程中
3. drag enter: 移动进入目标(target)容器
4. drag leave: 移出目标(target)容器
5. drop: 在目标(target)容器上释放鼠标
6. drag end: 结束
在html5之前,页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。
最简单的例子
最简单的拖拽是不改变元素所在的容器,而只改变其位置。例子如下:
< html > < head ></ head > < body > < div id = "container" > < div id = "dragsource" > < p >拽我!</ p > </ div > </ div > <!-- End container --> < script type = "text/javascript" src = "js/jquery-1.7.min.js" ></ script > < script type = "text/javascript" src = "js/jquery-ui-1.8.16.custom.min.js" ></ script > < script > $(function() { $( "#dragsource" ).draggable(); }) </ script > </ body > </ html >
拖动到另一个容器
更常见的场景是将元素拖动到另一个容器中。这就需要在drop目标(target)容器上应用droppable函数。让我们在上一个例子的基础上,增加一个div作为容器,并应用droppable函数:
<html> <head></head> <body> <div id= "container" > <div id= "dragsource" > <p>拽我!</p> </div> </div><!-- End container --> <div id= "droppalbe" style= "width: 300px;height:300px;background-color:gray" > <p>Drop here</p> </div> <script type= "text/javascript" src= "js/jquery-1.7.min.js" ></script> <script type= "text/javascript" src= "js/jquery-ui-1.8.16.custom.min.js" ></script> <script> $( function () { $( "#dragsource" ).draggable(); $( "#droppable" ).droppable(); }) </script> </body> </html>
事件监听和回显(Feedback)
运行上一个例子,你可能会产生疑惑,真的放到目标容器上了吗?用户也会产生同样的疑惑。所以,可以监听拖动过程中发生的一些事件,并用可见的方式让用户知道。这就叫做回显(Feedback)。
对于源(source),可以监听的事件包括:
create: 在source上应用draggable函数时触发
start:开始拖动时触发
drap:拖动过程中触发
stop:释放时触发
对于目标(target),可以监听的事件包括:
create: 在target上应用droppable函数时触发
activate:如果当前拖动的source可以drop到本target,则触发
deactivate:如果可以drop到本target的拖拽停止,则触发
over:source被拖动到target上面
out:source被拖动离开target
drop:source被释放到target
事件处理函数都是通过draggable和droppable函数的参数传递,在这些事件处理函数中就可以进行Feedback。看一下实际的例子:
<html> <head> </head> <body> <div id= "dragsource" > <p id= "targetMsg" >:-|</p> </div> <div id= "droppable" style= "background-color:gray;height:300" > <p>Can drop! </p> </div> <script type= "text/javascript" src= "js/jquery-1.7.min.js" ></script> <script type= "text/javascript" src= "js/jquery-ui-1.8.16.custom.min.js" ></script> <script> $( function () { $( "#dragsource" ).draggable({ start: function (event,ui) { $( this ).find( "p" ).html( ":-S" ); }, stop: function (event,ui){ $( this ).find( "p" ).html( ":-|" ); } }); $( "#droppable" ).droppable({ activate: function (event,ui) { $( this ).find( "p" ).html( "Drop here !" ); }, over: function (event,ui) { $( this ).find( "p" ).html( "Oh, Yeah!" ); }, out: function (event,ui) { $( this ).find( "p" ).html( "Don't leave me!" ); }, drop: function ( event, ui ) { $( this ).find( "p" ).html( "I've got it!" ); } }); }) </script> </body> </html>
复制拖动
前面的例子都是移动元素,另一种常见的场景是复制拖动。比如visio中的从画板中拖动元素到画布。这是通过draggable函数的helper参数设定的。
helper可以指定为“original”, "clone",其中"original"是默认值,即拖动自身,而clone表示创建自身的一个克隆用于拖拽。helper还可以指定为函数,该函数返回一个自定义的DOM元素用于拖拽。
当不是拖动自身的时候,需要在target上指定drop事件函数,在该函数中将特定的元素添加到target容器上,否则drop的时候什么事情都不会发生。
简单复制的例子如下:
<html> <head></head> <body> <div id= "dragsource" > <p>拽我!</p> </div> <div id= "container" style= "background-color:gray;height:300" > </div><!-- End container --> <script type= "text/javascript" src= "js/jquery-1.7.min.js" ></script> <script type= "text/javascript" src= "js/jquery-ui-1.8.16.custom.min.js" ></script> <script> $( function () { $( "#dragsource" ).draggable({ helper: "clone" }); $( "#container" ).droppable({ drop: function (event,ui){ $( this ).append($( "<p style='position:absolute;left:" + ui.offset.left+ ";top:" +ui.offset.top+ "'>clone</p>" )); } }); }) </script> </body> </html>
拖动控制
到目前位置,所有的例子中都可以对source随意拖动。在实际应用中经常需要对拖动行为进行控制。下面给出几个例子。
拖动方向
默认拖动方向为x,y两个方向。通过draggable的axis参数可以限制只能水平或竖直拖动。如下:
<html> <head></head> <body> <div id= "dragX" > <p>--</p> </div> <div id= "dragY" > <p>|</p> </div> <script type= "text/javascript" src= "js/jquery-1.7.min.js" ></script> <script type= "text/javascript" src= "js/jquery-ui-1.8.16.custom.min.js" ></script> <script> $( function () { $( "#dragX" ).draggable({axis: "x" }); $( "#dragY" ).draggable({axis: "y" }); }); </script> </body> </html>
拖动范围
除了方向之外,还可以通过containment参数约束拖动的范围。该参数接受Selector, Element, String, Array类型。其中String可以为parent,document,window,Array是指定一个矩形区域(regin)的四元数组: [x1,y1,x2,y2]。下面的例子分别指定了parent和regin作为范围限制:
<html> <head></head> <body> <div id= "container" style= "background-color:gray;height:300" > <div id= "draggable1" style= "background-color:red;height:20;width:100" > <p> in parent</p> </div> <div id= "draggable2" style= "background-color:green;height:20;width:100" > <p> in regin</p> </div> <script type= "text/javascript" src= "js/jquery-1.7.min.js" ></script> <script type= "text/javascript" src= "js/jquery-ui-1.8.16.custom.min.js" ></script> <script> $( function () { $( "#draggable1" ).draggable({containment: "parent" }); $( "#draggable2" ).draggable({containment: [20,20,300,200] }); }); </script> </body> </html>
拖动吸附
还可以在拖动的时候吸附到其他元素或网格。使用snap参数指定要吸附到的元素,使用grid参数指定吸附到网格,如下:
<html> <head> <style> .draggable {background-color:green; width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; } </style> </head> <body> <div id= "container" style= "background-color:gray;height:300" > <div id= "draggable1" class= "draggable" > <p>吸附到其他可拖拽元素</p> </div> <div id= "draggable2" class= "draggable" > <p>吸附到容器</p> </div> <div id= "draggable3" class= "draggable" > <p>吸附到网格(30x30)</p> </div> </div><!--container--> <script type= "text/javascript" src= "js/jquery-1.7.min.js" ></script> <script type= "text/javascript" src= "js/jquery-ui-1.8.16.custom.min.js" ></script> <script> $( function () { $( "#draggable1" ).draggable({ snap: true }); $( "#draggable2" ).draggable({ snap: "#container" }); $( "#draggable3" ).draggable({grid: [30,30]}); }); </script> </body> </html>
拖动把手(handle)
默认是整个元素都可以拖动,也可以指定元素的某个子元素作为拖动的handle,如:
<div id= "draggable" >
<p>400电话
</p>
</div>
……
<script>
$( "#draggable" ).draggable({handle: "p" });
</script>
Drop限制
默认的droppable指定元素能够接受所有的drop, 但是可以通过accept参数限定只能接受某些元素的drop。accept参数的类型为一个符合jquery selector的字符串。例如:
$(".selector").droppable({ accept: '.special' })
表示只接受具有special 样式的元素。
增强用户体验
前面是实现拖拽的功能,JQueryUI还有一些参数可以增强用户体验。比如,cursor参数可以指定鼠标指针的形状,cursorAt指定鼠标指针在source的相对位置,revert可以指定当drop失败时source“飘”回原来的位置。一个组合的例子如下:
<html> <head> <style> .draggable {background-color:green; width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; } .droppable { width: 300px; height: 300px; background-color:red} </style> </head> <body> <div id= "draggable2" class= "draggable" > <p>I revert when I'm not dropped</p> </div> <div id= "droppable" class= "droppable" > <p>Drop me here</p> </div> <script type= "text/javascript" src= "js/jquery-1.7.min.js" ></script> <script type= "text/javascript" src= "js/jquery-ui-1.8.16.custom.min.js" ></script> <script> $( function () { $( "#draggable2" ).draggable({ revert: "invalid" ,cursor: "move" , cursorAt: { top: 56, left: 56 } }); $( "#droppable" ).droppable({ activeClass: "ui-state-hover" , hoverClass: "ui-state-active" , drop: function ( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); </script> </body> </html>
小结
JQuery UI提供了强大的拖拽功能和良好的用户体验,同时又非常容易使用。本文介绍了常用的各种用法。更多的参数还可以参考官方网站的Draggable 和 Droppable 。
发表评论
-
Java和C#运行命令行并获取返回值 运行bat文件
2015-08-04 10:45 1339Java运行命令行的例子 import java.io.B ... -
C#和java调用phantomjs采集ajax加载生成的网页
2015-08-04 09:58 4326日前有采集需求,当我把所有的对应页面的链接都拿到 ... -
IE6下z-index犯癫不起作用bug的初步研究
2013-06-08 14:26 693一、匆匆带过的概念 ... -
解决getAsDataURL在Firefox7.0 无法预览本地图片
2013-04-19 11:28 982取原代码:return obj.files.item(0). ... -
jQuery Validation Engine 表单验证
2013-04-03 15:15 5293注意事项: 1.演示版本为 v2.2.4; 2.v2 ... -
jquery-validation 使用
2013-04-03 15:10 1113一、用前必备官方网 ... -
jcarousellite_1.0.1.min.js 使用小结
2013-01-18 23:29 2763注意:在DIV 内的 li 文本内容不能超过 div ... -
Skygq表单验证ajax无刷新表单提交详解(jquery)
2012-03-15 13:56 1513最近一直都在忙着将 ... -
在php中使用CKEDITOR在线编辑器
2012-01-30 16:55 2967一、官方Download 1、CKEditor ... -
javascript中的正则表达式的贪婪模式和非贪婪模式讲解
2011-11-16 09:41 12061、贪婪模式: 根据匹配字符串以及表达式尽可能多的进行匹配, ... -
jquery easyui window 打开后移动位置在打开后不居中问题解决
2011-07-28 10:16 3542打开后移动位置在打开后不居中问题解决方法就很简单了,我们在打开 ... -
jquery attr 设定src中含有&(宏)符号的问题解决
2011-07-26 09:25 1092今天在用 jquery 的attr 方 ... -
jquery easyui datagrid 动态改变url地址中的参数值
2011-07-25 13:56 2916方法一:(改变后加 ... -
给javascript添加事件
2011-07-25 11:46 684//当数据改变,光标离开时触发 _save. ... -
js通用数据检测方法(只完成js端大体功能,随会追加php端代码)
2011-07-05 17:03 945js通用数据检测方法,现在只完成js端大体功能,随会追加p ... -
JS自动滚屏程序
2011-05-26 15:27 670<!DOCTYPE HTML PUBLIC " ... -
使用jQuery的ajax的post与get发送数据到指定url
2011-03-07 17:28 2270针对上一篇JQuery学习中使用JQuery和Protot ... -
js 初始化时如何建立二维数组
2011-01-12 16:52 2706建立二维数据js数据的代码如下: <! ... -
屏蔽右键(javascript)兼容ie,firefox
2010-11-30 08:48 1430if (window.Event) document.ca ... -
javascript 限制输入和粘贴,兼容IE和火狐3.x
2010-11-30 08:41 1131<html> <head> & ...
相关推荐
"JQueryUI拖拽效果"是其中的一个核心功能,它允许用户通过简单的API调用来实现元素在页面上的拖放操作。 1. **拖拽功能的实现** jQueryUI的`draggable()`方法用于将任何HTML元素变为可拖动的对象。只需在目标元素...
首先,要使用jQuery UI的拖拽功能,你需要在你的HTML页面中引入jQuery库和jQuery UI库。通常,这可以通过在`<head>`标签内添加以下代码完成: ```html <script src="https://code.jquery....
使用jQuery UI的拖拽功能,开发者首先需要在页面中引入jQuery和jQuery UI的库。接着,通过`draggable()`方法将特定的DOM元素设置为可拖动,如下所示: ```html <!DOCTYPE html> <link rel="stylesheet" href="...
《JQuery UI拖拽功能详解与实践》 JQuery UI库为开发者提供了极其方便的拖拽功能实现,极大地简化了HTML元素的拖放操作。这一功能的实现主要依赖于两个核心函数:`draggable`和`droppable`。本文将深入探讨拖拽功能...
综上所述,"jQuery UI拖拽到Table表格特效"是一个利用jQuery UI库实现的增强用户交互的实用功能。通过结合`draggable`和`droppable`,我们可以创建出一个直观、用户友好的界面,使用户能够轻松地将信息添加到表格中...
总结,实现jQuery UI拖拽效果的关键在于正确配置`draggable`和`droppable`组件,并确保HTML结构支持拖放行为。通过结合JavaScript和CSS,我们可以创建出直观且易于使用的用户界面,让用户能够方便地将div中的数据...
**jQuery UI 拖拽拖放插件:jquery.top-droppable** 在Web开发中,交互性和用户体验至关重要,而拖放功能(Drag and Drop)是提升用户体验的一种有效方式。jQuery UI是一个强大的JavaScript库,提供了丰富的用户...
在本文中,我们将深入探讨如何使用jsPlumb和jQuery UI库构建一个基于Web的流程设计器,该设计器具有拖拽功能,并适用于多种主流浏览器。这个工具对于业务流程建模、工作流设计以及任何需要图形化表示流程的应用场景...
《jQuery UI拖拽到Table表格特效的实现与应用》 在网页开发中,交互性和用户体验是至关重要的元素,而jQuery UI库提供了一系列丰富的组件和特效,使得开发者能够轻松实现复杂的功能,提升用户交互体验。本篇文章将...
首先,jQuery UI的拖拽功能允许用户通过鼠标拖动元素在页面上自由移动,这一特性广泛应用于各种场景,如文件管理器、日历事件调整、窗口拖放等。在“超级强大的jquery UI多功能拖拽交互效果源代码”中,开发者可以...
JQuery 拖拽功能是基于 jQuery UI 库的一个强大特性,它允许用户通过鼠标操作元素在页面上自由移动,增强了交互性和用户体验。在实现拖拽效果时,我们需要引入 jQuery UI 的相关库,包括 `jquery.ui.core`, `jquery....
本篇文章将深入探讨如何利用jQuery UI实现表格内容的拖拽功能,基于提供的"jQuery UI表格内容拖拽代码.zip"资源,我们将详细讲解其背后的实现机制。 首先,我们需要了解基础的环境设置。这个项目基于jQuery 1.11.3....
在这个“jQuery UI拖拽信息到Table表格特效”示例中,我们主要关注的是如何使用 jQuery UI 的拖放功能来实现动态地将数据拖放到表格中。 首先,`index.html` 是项目的主页面文件,它包含了必要的 HTML 结构。在 ...
首先,jQuery UI的拖拽(Draggable)插件是其核心功能之一,它允许用户通过鼠标点击并拖动元素在页面上移动。要实现这一功能,开发者需要在目标元素上添加`draggable`方法,并配置相应的选项。例如: ```javascript...
jqueryUI拖拽排序插件,单独的插件,可以独立使用!不必引入整个jqueryUi框架就可使用
首先,jQuery库为我们提供了一个方便的`draggable()`插件,用于实现元素的拖拽功能。这个插件允许用户通过鼠标操作,将指定的DOM元素在页面上移动。要使用`draggable()`,你需要确保已经引入了jQuery库和jQuery UI库...
其次,实现菜单的拖拽功能,jQuery UI提供了draggable插件。用户可以通过鼠标点击并拖动菜单到页面上的任何位置,增强了菜单的互动性和灵活性。同时,为了确保拖动过程中菜单保持圆形,可能需要在drag事件中实时调整...
综上所述,这个基于jQuery UI的可拖拽排序时间行程表插件,结合了jQuery的强大功能、jQuery UI的易用组件和CSS3的现代视觉效果,为用户提供了一个既实用又美观的在线日程管理工具。开发者可以利用提供的源代码和文档...
jQuery UI 包含了大量的预设样式和功能,这些组件易于定制且兼容性广泛,支持多种浏览器,包括IE6及以上版本。 ### 主要组件 1. **Tabs(选项卡)**:jQuery UI 提供了方便的选项卡组件,可以将内容分隔成多个部分...
6. **拖拽功能**:jQuery UI的draggable组件允许用户拖动整个菜单,增加了菜单的灵活性和可用性。 7. **响应式设计**:为了适应不同设备和屏幕尺寸,菜单应具备响应式布局,确保在任何环境下都能正常工作。 在实际...