jquery插件 - EasyDrag 简单拖动栏

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

EasyDrag可以指定DOM中某个元素,使其可以用鼠标进行拖放操作。假设DOM中有一个元素:

Drag me…
。那么这样让它支持拖放:

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

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

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

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

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

Darg me…

$(”#box1″).easydrag(false,["darghandle"]);

这样就完美了。

 

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/12639172/viewspace-553566/,如需转载,请注明出处,否则将追究法律责任。

转载于:http://blog.itpub.net/12639172/viewspace-553566/

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用法: $(“#box”).easydrag();//给指定的标签绑定拖动效果,也可以是Class $(“#box”).setHandler(‘handler’);//指定触发拖动的元素,download best apps for iphone 5handler是该元素的idhttp://www.newipadipa.com/ ,后面我们需要修改它 首先这个插件真的很好用(废话),短短2行代码就能让页面中的div动起来。但是如果要拖动很多div的时候 ,我们还是要稍微做出修改才能正常使用。 首先我的弹窗div在弹出的时候是默认在页面正中的,但是要使用这个插件拖动的div就要使 用”position:absolute”的属性定位,这让我们的居中非常困难。解决思路:在触发弹窗之前用js获取当前屏 幕的分辨率然后将div居中。 js代码: { var div_width=Number(jQuery(‘#box’).css(‘width’)); var sc_width=(Number(window.screen.width)/2-(div_width/2)); //div距离浏览器左边框的距离为屏幕宽 度的一半-div宽度的一半 jQuery(‘#box).css(‘left’,sc_width); } 好了,初始化之后就是拖动了,如果需要拖动的div不多的话这样就可以了。但是我写的页面要拖动的div较多 ,而且这个插件只能用id号给元素绑定触发拖动的属性,如果一个id一个id的绑定事件的话会造成代码冗余 。所以我们要修改一下源文件jquery.easydrag.handler.beta2.js:找到 function(handlerId) 这个函数, 将里面的$(“#”+handlerId)都改成$(“.”+handlerId)就可以了。好吧,这样就可以了,下面是实例,高手们请 无视好了。。。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值