jquery插件 - EasyDrag 简单拖动栏

简介: 首先要感谢木野狐,解决了EasyDrag这个Jquery插件没有指定拖动的handle的问题。这可是个大问题,尽管EasyDrag是个非常轻巧又实用的插件,但没有拖动的handle使我决定放弃它而选用臃肿的interface。

首先要感谢木野狐,解决了EasyDrag这个Jquery插件没有指定拖动的handle的问题。这可是个大问题,尽管EasyDrag是个非常轻巧又实用的插件,但没有拖动的handle使我决定放弃它而选用臃肿的interface。那是多么痛苦的选择……

EasyDrag可以指定DOM中某个元素,使其可以用鼠标进行拖放操作。假设DOM中有一个元素:<div id=”box1″>Drag me…</div>。那么这样让它支持拖放:

$(”#box1″).easydrag();

如果想得到元素的位置值,可以用EasyDrag的ondrop方法CallBack回一个对象,如:

$(”#box1″).ondrop(function(a){ alert(a.x+’,'+a.y); });

操作很简单,但有个问题,就是鼠标在元素中任何范围内都可以对元素进行拖动。如果元素中有一个滚动条或按钮就麻烦了!鼠标只要一点动滚动条或按钮,整个元素就会永远跟着鼠标指针,象块风湿贴膏一样甩都甩不掉……

木野狐解决了这个问题,他扩展了这个插件,指定一个元素为拖动的handle。把这个元素嵌入被拖动的元素中,鼠标只在handle范围内才可以拖动整个元素。比如:

<div id=”box1><div id=”darghandle“></div>Darg me…</div>
$(”#box1″).easydrag(false,["darghandle"]);

这样就完美了。

目录
相关文章
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
58 0
|
6月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
30天前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
54 2
|
5月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
60 1
|
1月前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
37 4
jQuery Growl 插件(消息提醒)
|
1月前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
36 4
jQuery Cookie 插件
|
3天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
12 0
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
Validform jQuery插件详解
【8月更文挑战第21天】
|
5月前
|
JavaScript Perl PHP
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
33 0
|
6月前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
99 1