当前位置: 首页 > 工具软件 > EasyDrag > 使用案例 >

让页面中的DIV可以拖动-jQuery插件EasyDrag插件使用简介

狄富
2023-12-01

文件:jquery.easydrag.handler.beta2.js

用法:

$(“#box”).easydrag();//给指定的标签绑定拖动效果,也可以是Class
$(“#box”).setHandler(‘handler’);//指定触发拖动的元素,handler是该元素的id,后面我们需要修改它

首先这个插件真的很好用(废话),短短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)就可以了。好吧,这样就可以了,下面是实例,高手们请

无视好了。。。

 http://dota.jnecw.com/daimayanshi/easydrag.html

 类似资料: