Jquery-ui draggable

简介:

Jquery ui的draggable插件让某个元素能被鼠标拖拽。

 

draggable和droppable的区别:

draggable只是控制拖拽,如果你要控制拖拽和放下两个动作,你需要使用的是droppable插件

 

draggable有三个事件可以定义回调函数:

start, stop, drag

 

 

这三个事件定义的回调函数可以有两个参数,一个是原始的浏览器定义的事件,另一个是插件定义的事件,假定为ui

ui拥有的属性有:

ui.helper

ui.position

ui.offset

 

 

drag的动作的时候可以设置helper,就是在拖动的时候鼠标旁边显示的提示工具条

draggable的属性有:

disabled: 是否设置此属性可拖拽

addClass:当设置为false的时候,ui-draggable这个class就不会加到上面

appendTo: 指示draggable的时候的helper的container

axis:允许的值是x或者y,限定拖拽只能在x轴变化和只能在y轴变化

connectToSortable:

containment: 拖拽元素所在的容器

cursor: 拖拽的时候鼠标样式

cursorAt: 设置helper相对于鼠标的位置

delay: 设置拖拽动作生效的延迟时间

distance: 设置拖拽动作生效的延迟距离

grad:拖动过程中鼠标移动的单位

helper: helper显示设置

iframeFix:解决拖动过程中与iframe层叠后的事件问题

opacity:设置helper的透明度

refreshPositions: 是否重新计算位置

revert:设置拖拽回复到原始位置

revertDuration:拖拽回复到原始位置的延迟时间

scope: 设定draggable的域, 用来和droppable结合使用时确定可放入的目标

目录
相关文章
|
12天前
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
33 14
|
1月前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
64 21
|
1月前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
53 16
|
30天前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
45 9
|
1月前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
1月前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
1月前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。