开发学院网页设计 DivCss 让页面中的DIV可以拖动(jQuery插件) 阅读

让页面中的DIV可以拖动(jQuery插件)

　2012-05-26 15:43:31　来源：WEB开发网　　　

核心提示：用法：$(“#box”).easydrag();//给指定的标签绑定拖动效果，也可以是Class$(“#box”).setHandler(‘handler’);//指定触发拖动的元素，让页面中的DIV可以拖动(jQuery插件)，handler是该

用法：

$(“#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)就可以了。好吧，这样就可以了，下面是实例，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script language="javascript" type="text/javascript" src="http://fromvega.com/code/easydrag/jquery.easydrag.handler.beta2.js"></script>

<script language="javascript">

jQuery(function(){

$("#box").easydrag();//给指定的标签绑定拖动效果，也可以是Class

$("#box").setHandler('handler');//指定触发拖动的元素，handler是该元素的id，后面我们需要修改它

})

</script>

<title>easydrag插件演示</title>

</head>



<body>

<div id="box" style="width:200px; height:200px;; background:#FF9900">

<div id="handler" style="background:#000000; width:100%; height:20px;" >拖动我</div>

</div>

</body>

</html>