div 拖动

来源：互联网发布：数字新闻数据新闻编辑：程序博客网时间：2024/05/21 17:00

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<script language="javascript" src="jquery-1.5.1.min.js"></script>
<style>
.test1{
left:100px;top:10px;width:100px;height:100px;background:yellow;border:1px dotted red;position:absolute;
}
.test2{
left:150px;top:20px;width:100px;height:100px;background:yellow;border:1px dotted red;position:absolute;
}
.test3{
left:200px;top:30px;width:100px;height:100px;background:yellow;border:1px dotted red;position:absolute;
}
div{
width:100px;
height:100px;
background:yellow;
}
</style>
</head>

<body>
<div>test</div>
<div class="test1"></div>
<div class="test1"></div>
<div class="test1"></div>
<div class="test1"></div>
<div class="test2"></div>
<div class="test2"></div>
<div class="test2"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test3"></div>
<div class="test3"></div>
<div class="test3"></div>
<div class="test3"></div>
<script>
jQuery.extend({zIndex : 100});
jQuery.fn.extend({
asfmanDrag : function(callback,func)
{
   this.each(function(){
    this.posRange = {minX:0,minY:0,maxX:(document.compatMode == "CSS1Compat"?document.documentElement.clientWidth:document.body.clientWidth),maxY:(document.compatMode == "CSS1Compat"?document.documentElement.clientHeight:document.body.clientHeight)};
    this.onmousedown = function(e)
    {
       this.style.zIndex = $.zIndex++;
       this.style.position = "absolute";
       this.drag(e,callback,func);
    }
    this.drag = function(e,callback,func)
    {
        var element = this,ev = e || window.event;
        ev.rScreenX = ev.screenX;
        ev.rScreenY = ev.screenY;
        var pos = $(this).offset();
        element.dragConfig = {defaultX : parseInt(pos.left,10),defaultY : parseInt(pos.top,10),defaultW: parseInt($(this).width(),10),defaultH : parseInt($(this).height(),10)};
        document.onmouseup = function()
        {
            element.drop();
            callback && callback();
        };
        document.onmousemove = function(e)
        {
            var ev2 = e || window.event;
            if($.browser.msie&& ev2.button!=1)
            {
                return (element.drop(),callback && callback());
            }
            var mx = element.dragConfig.defaultX + (ev2.screenX - ev.rScreenX),
            my = element.dragConfig.defaultY + (ev2.screenY - ev.rScreenY),
            pr = element.posRange,mw = element.dragConfig.defaultW,mh = element.dragConfig.defaultH;
            with(element.style)
            {
                left = (mx<pr.minX?pr.minX:((mx+mw)>pr.maxX?(pr.maxX-mw):mx)) + "px";
                top = (my<pr.minY?pr.minY:((my+mh)>pr.maxY?(pr.maxY-mh):my)) + "px";
            }
            func && func();
                                  return false;
        };
        document.onselectstart = function(){return false;};
    }
    this.drop = function()
    {
        document.onmousemove = document.onselectstart = document.onmouseup = null;
    }
   })
}
})
$("div").asfmanDrag();
</script>
</body>

</html>