转载请注明文章来源自http://www.dabaii.com/
jQuery UI 很不错,最近在学习笔记一下,一下学习资料仅供参考,由于本人也是初学,对所有代码以及说明不做100%正确保证。请根据实际情况和现实理解和使用。如果发现错误,请告诉我,谢谢。
Draggable拖动是jQ UI 的第一个例子。今天学习了下,由于英文阅读能力有限 有些属性没弄明白,以后补充。
初始化框架,引用对应ui库文件
JavaScript代码
<link type="text/css" href="../development-bundle/themes/ui-lightness/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery-1.3.2.min.js""></script>
<script type="text/javascript" src="../development-bundle/ui/ui.core.js"></script>
<script type="text/javascript" src="../development-bundle/ui/ui.draggable.js"></script>
dom加载完以后执行绑定。
XML/HTML代码
<script type="text/javascript">
$(function() {
$("#draggable").draggable();
});
</script>
现在基本的拖拽已经可以实现了。 只要你在页面创建一个 以 #draggable命名的标签就ok了
draggable方法有很多参数,今天我瞎摸弄明白了一下几个:
addClasses:
如果设置成false,将不添加ui-draggable这个class.当调用 .draggable() 初始化上百个元素时,可以优化性能(【王子很坏】提供翻译)
appendTo :
进行拖拽时,被传递或被appendTo选项选择的元素将被当做draggable helper的容器,默认情况下,helper被追加到那个draggable元素相同的容器中((【王子很坏】提供翻译 , 这个属性我测试没成功。研究中)
axis:
拖拽动作只在 对应的轴向上移动。 参数x 或 y
cancel :
当拖拽对象是cancel说设置的标签或者对象时候,拖拽无效
containment:
限制拖拽对象在参数设置区域,参数可以为 标签 对象 或者 是[x1,y2,x2,y2]的像素区域
cursor:
设置 拖拽动作鼠标样式
cursorAt:
设置拖拽动作发生鼠标所在位置 参数为 { cursorAt: { left: 5 } }
delay:
拖拽动作延迟多少毫秒后响应 参数 毫秒
distance:
拖拽动作离开拖拽对象 一定像素以后 拖拽发生 参数数值
grid :
拖拽动作发生后 造成 对其网格效果, 其效果是每次移动 固定像素距离,参数为 [20, 20]
handle:
设置拖拽对象里面可实现拖拽动作的对象。参数是选择器 类似于浏览器一样,只能通过顶部蓝色条拖拽,但是拖动的是整个浏览器。
helper :
拖拽动作发生时 原始对象不动,复制一个对象给拖拽事件 对象在拖拽结束后是否保存在结束位置取决于参数 'original', 'clone', Function. 参数为function的时候不许返回一个 dom标签。
iframeFix :
防止应为iframes 的存在导致拖拽在中途丢失
opacity :
设置拖拽时的透明度 参数浮点型 1.00-0.00 拖拽结束后 透明度回复初始状态
scroll :
设置拖动对象被拖动时,是否允许拖出前容器(浏览器)显示区域(也就是说触不发auto-scrolls *关于auto-scrolls请看后面的解释*)。设置为false ,拖动对象碰到边框的时候容器窗口不会随着碰撞移动主体窗口。 注意,这个经过我测试,设置为false 一样会产生滚动条。
scrollSensitivity :
设置拖拽对象被拖拽时与容器发生碰撞的响应距离。貌似这样解释不好理解,通俗的说,就是当你碰到边框的多少像素范围内就发生auto-scrolls事件。
scrollSpeed:
当拖拽对象和浏览器边发生碰撞时,容器每次移动主体窗口的距离。
revert :
设置拖拽事件执行完毕后拖拽是否生效,如果不生效那么将以动画方式返回到拖拽对象初始化位置。参数为逻辑值或者字符串'valid', 'invalid'
revertDuration :
在revert事件执行时候,设置以动画返回初始化位置的速度。参数为 数值毫秒。在没有设置revert的情况下 改属性没意义。
snap:
拖拽对象设置该属性以后,在2个拖拽对象即将发生接触时,拖拽对象会自动吸附到相互的边上。类似于磁铁效果或者ps里面的对齐参考。参数为逻辑值, 只有2个或者2个以上对象设置了该属性才能相互发生作用。
snapMode :
拖拽对象相互之间的吸附模式。参数为'inner', 'outer', 'both'。 默认值是both。
snapTolerance:
拖拽对象相互之间发生吸附模式的作用范围,可以理解为 磁铁的磁力, 参数为 像素单位。
stack :
当你有多个拖拽对象的时候,你可以使用此参数把他们设置为一个组,然后在这个参数里面有可以定义最小z轴,这些拖拽对象,将不再按照原始z轴层叠,而是按照最后点击循序来层叠。类似于windows多个文件夹窗口一样的层叠。 参数方式{ stack: { group: 'div', min: 50 }}。
zIndex 拖动事件触发时候 z轴改成对应参数,拖拽结束,z轴还原。
注:【aoto-scroll 是自动滚动,也就是说 拖拽对象在碰撞到边框的时候,容器(浏览器)滚动条会自动延伸滚动条 并且屏幕像碰撞方向偏移~】
事件:
拖拽有3个事件,和4个参数 详情可以直接看官方aip那些不用详细说明。
基本参数写法
JavaScript代码
$("#draggable").draggable({ opacity: 0.35 });
如何获取参数?
组件提供get和set方法来获取和设置参数。
以上面设置透明度为例:
JavaScript代码
//getter
var opacity = $('.selector').draggable('option', 'opacity');
//setter
$('.selector').draggable('option', 'opacity', 0.35);
以上只是draggable的部分内容,明天更新剩下的。如果有兴趣请直接访问
http://jqueryui.com/demos/draggable/
唉都怪英语没学好。痛苦中~~~
分享到:
相关推荐
JQuery的插件,实现拖拽效果所需要的插件,jquery.ui.draggable.js
Jquery UI Draggable中文API及使用
Jquery UI Draggable中文api pdf,Jquery UI Draggable中文api pdf ,Jquery UI Draggable中文api pdf
使用jquery ui 的draggable实现的 div包裹的元素拖动到表格里,已经拖到表格里的div可以在tbody范围内的td间拖动的demo
选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html 1.2 Droppables 所需要文件,drag drop ui.mouse.js ui.draggable.js ui.draggable.ext.js ui.droppable.js ui.droppable.ext....
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。 编辑本段组件构成 jQuery UI ...
jQuery UI Draggable 概述 jQuery UI Draggable 插件可以使被选择的元素随着鼠标移动实现拖动. 可拖动的元素得到一个ui-draggable类. 拖动中的元素始终得到ui-draggable-dragging类. 假如你不仅仅只想要拖动,而是想...
JQuery的插件,实现拖拽效果所需要的插件,jquery.ui.draggable.js
JQuery的插件,实现拖拽效果所需要的插件,jquery.ui.draggable.js
安装 通过凉亭安装 bower install jquery-ui-draggable
教程名称: 李炎恢JQuery EasyUI视频培训教程_EasyUI是基于jQuery的UI插件集合01.[jQuery EasyUI]第1章 jQuery EasyUI入门02.[jQuery EasyUI]第2章 使用EasyUI03.[jQuery EasyUI]第3章 Draggable(拖动)组件04....
jquery-ui,jquery, 必做要使用jQuery1.6+ 及以上 jQuery UI组件构成 jQuery UI 主要分为3个部分:交互、微件和效果库。 交互(Interactions) 交互部件是一些与鼠标交互相关的内容,包括缩放(Resizable) , 拖动...
<script type="text/javascript" src="ui/jquery.ui.draggable.js"> <script type="text/javascript" src="ui/jquery.ui.position.js"> <script type="text/javascript" src="ui/jquery.ui.dialog.js">...
JQuery UI Draggable插件使用说明文档
附件包括: jquery1.4.2.chm jquery1.5.1.chm jquery1.5.1.air及air阅读器; JQUERY API1.5 重构说明 新版API移除了95%对外暴露的函数...我们也实现了自由地插件更新机制,更少的更新让UI就像一起开发出的套件....
jQuery UI-Draggable常用参数集合。
Query UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容 IE 6.0+, ...
与jquery-ui-draggable 1.9.2+和jquery-collision 1.0.2+结合使用。 拖动时提供碰撞事件,并处理避免碰撞。 冲突和遏制设置是分层且可扩展的,从而允许复杂的交互。 试试看:http://eruciform.com/jquidragcollide/
jquery-ui-draggable-collision.js 或任何特定或缩小版本的 jquery-ui-draggable-collision(-xxx)(.min).js 复制到您的 javascript 目录中确保 jquery 1.10.1 或更高版本可访问确保 jqueryui 10.4 或更高版本可访问...
[原文翻译]JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.Draggable的元素受影响css: ui-draggable, 拖动过程中的css: ui-draggable-dragging.如果需要的不仅仅是拖, 而是一个完整的拖放功能, 请参阅...