Jquery Drag and Drop

jquery.dragndrop 是基于 jQuery 1.2.* 开发的一款 jQuery 插件,为用户实现 html dom
拖拽提供了更为便捷的方法。

Demo 效果如下:

源码可到此下载:jquery.dragndrop.js

API简介:

zIndex(Int): 拖拽发生时拖拽对象的 z-index 值, 主要是为了防止被遮挡,
默认值为20,
opacity(Float): 拖拽发生时拖拽对象的透明度, 最大为 1 最小为 0, 默认值为
0.7,
handler(String|Object): 拖拽柄, 比如一般的窗口, 标题部分就为拖拽柄,
当点击拖拽柄使会拖拽整个拖拽对象, 默认值为 null, 必须指定, 可为jQuery筛选器对象,如 ‘.drag‘ 或 ‘#drag‘ ,
也可以为jQuery对象,如 $(‘.drag‘),
onMove(Function): 拖拽发生时的触发事件,
默认值为 function(e) { }, 参数e为拖拽对象参数, 如可使用e.pageX, e.pageY来获取当前对象位置, 使用cookie存储,
同样也可通过 e.data.dragData获取拖拽对象其他参数, 具体内容可查看源码,

onDrop(Function): 拖拽结束时触发的事件, 默认值为 function(e) {
},参数说明同上.

如有不明白的地方可以直接查看源码中的示例.

在线演示:live
demo

时间: 2024-10-05 09:29:23

Jquery Drag and Drop的相关文章

使用HTML5本地 Drag和Drop API(native API)

人人都爱使用方便..具有互动的用户界面.并且随着智能手机的引入,用户的期望瞬间高了一大截.他们希望网站一目了然,交互动作尽人皆知.总之,他们希望你的网站使用起来超级简单. 让你的用户能在你的网站实现拖拽之类的操作吧,这会让你的网站更加具有交互性.因为人们都知道如何把东西从X拖到Y位置,知道如果把A拖到B前面的话,那么A就会先显示出来. 处理拖动,拖入之类的操作以前总是javascript的事情,开发者们早先也有自己的方法构建交互动作或者使用预制解决方案.随着HTML5 Drag和Drop API

原生拖拽,拖放事件(drag and drop)

原生拖拽,拖放事件(drag and drop) 拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改. drag and drop事件流程 一个完整的drag and drop流程通常包含以下几个步骤: 设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽. 监听dragstart设置拖拽数据 为拖拽操作设置反馈图标(可选) 设置允许的拖放效果,如copy,move,link 设置拖放目标,默认情况

[Javascript + rxjs] Simple drag and drop with Observables

Armed with the map and concatAll functions, we can create fairly complex interactions in a simple way. We will use Observable to create a simple drag and drop example with basic DOM elements. <!DOCTYPE html> <html> <head lang="en"

关于QListWidget的Drag和Drop用法

QListWIdget的Drag和Drop. 真是坑爹到不行... 其实很简单的.. 最后搞到好多行代码.. 真是作死的节奏............... 先上代码:<这种方法也可以实现, 但是太麻烦了...> #include "PlayerDragWidget.h" #include "PlayerLyricsListItem.h" #include <QDrag> #include <QPainter> #include &

基于HTML5的Drag and Drop生成图片Base64信息

直击现场 基于HTML5的Drag and Drop生成图片Base64信息 发表于4个月前(2014-12-19 00:58)   阅读(103) | 评论(0) 11人收藏此文章, 我要收藏 赞0 慕课网,程序员升职加薪神器,点击免费学习 摘要 HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag and Drop生成图片的Base64的字符串信

drag and drop

<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDef

delphi Drag and Drop sample 鼠标拖放操作实例

Drag and Drop is a common operation that makes the interface user friendly: a user can drag/drop information to controls instead of having to type etc. The following sample explains basics of drag and drop. For detailed information you should refer t

通过HTML5的Drag and Drop生成拓扑图片Base64信息

HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag and Drop生成图片的Base64的字符串信息. 使用Base64方式的图片有诸多好处,可将多个图片信息整合到单个js文件避免多次http请求,可以避免WebGL例子跨域访问的安全限制无法本地文件运行等好处,当然弊端也不少例如不能有效利用浏览器图片缓存机制等.使用HT for Web的

Android 用户界面---拖放(Drag and Drop)(三)

设计拖放操作 本节主要内容如下: 1.  如何开始拖拽: 2.  在拖拽期间如何响应事件: 3.  如何响应落下事件: 4.  如何结束拖放操作. 开始拖拽 用户使用一个拖拽手势开始拖拽,通常是在View对象上长按.在响应中,应该做下列事情: 1.  必要时,给要移动的数据创建一个ClipData和ClipData.Item对象,作为ClipData对象的一部分,在ClipData对象内部的ClipDescription对象中保存了元数据.因为拖放操作不代表数据的移动,因此可以使用null来代替