qghboy.Net专栏

用代码书写人生,用软件改变生活

[Web]如何利用js库dom-drag.js最简单化实现移动图层和点击实现div居上问题

实现效果如图:
 

1. 鼠标拖放是应用中常见的模式,www.young.net 提代了一个 JavaScript 库( dom-drag.js ),可以帮助开发人员更快实现鼠标拖放的功能。下面就给出一个应用实例大家参考:

<!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>
    
<title>移动的图层,并实现图层居上</title>
    
<script src="dom-drag.js" type="text/javascript"></script>
    
<script type="text/javascript">
        
var div_z_index=1;
        
function zIndexAdd(divId)
        {
            
var divObject=document.getElementById(divId);   
               
            div_z_index
++;
            
            divObject.style.zIndex
=div_z_index;
            
            
//请注意:这里是 zIndex 千万不要写成 z-index 否则会出错的
        }
    
</script>
</head>
<body>
    
<div id="mydiv1" onclick="zIndexAdd('mydiv1')" style="border: #000000 1px solid;width: 168px;height: 112px; background-color: #99ccff; position: absolute;">
    
<div id="div11" style="background-color: #3366ff;cursor:move; width:100%;">点我移动图层</div>
    
<div id="div12"><br/>我是内容,点我移不动</div>
    
</div>
    

    
<div id="mydiv2" onclick="zIndexAdd('mydiv2')" style="border: #000000 1px solid;width: 168px;height: 112px; background-color: #ffcc33; position: absolute;">
    
<div id="div21" style="background-color: #ff6600;cursor:move; width:100%;">标题</div>
    
<div id="div22"><br/>我是内容,点那都可以移动</div>
    
</div>

</body>
</html>

<script type="text/javascript">

    
var div_root=document.getElementById("mydiv1");
    
var div_handle=document.getElementById("div11"); 
    Drag.init(div_handle,div_root); 
//可是是二个参数
    
    
    
var div_root2=document.getElementById("mydiv2");
    Drag.init(div_root2); 
//也可以是一个参数
    
</script>


其中( dom-drag.js )文件我也把它复制给大家看看

/**************************************************
 * dom-drag.js
 * 09.25.2001
 * www.youngpup.net
 **************************************************
 * 10.28.2001 - fixed minor bug where events
 * sometimes fired off the handle, not the root.
 *************************************************
*/

var Drag = {

    obj : 
null,

    init : 
function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
    {
        o.onmousedown    
= Drag.start;

        o.hmode            
= bSwapHorzRef ? false : true ;
        o.vmode            
= bSwapVertRef ? false : true ;

        o.root 
= oRoot && oRoot != null ? oRoot : o ;

        
if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px";
        
if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
        
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
        
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";

        o.minX    
= typeof minX != 'undefined' ? minX : null;
        o.minY    
= typeof minY != 'undefined' ? minY : null;
        o.maxX    
= typeof maxX != 'undefined' ? maxX : null;
        o.maxY    
= typeof maxY != 'undefined' ? maxY : null;

        o.xMapper 
= fXMapper ? fXMapper : null;
        o.yMapper 
= fYMapper ? fYMapper : null;

        o.root.onDragStart    
= new Function();
        o.root.onDragEnd    
= new Function();
        o.root.onDrag        
= new Function();
    },

    start : 
function(e)
    {
        
var o = Drag.obj = this;
        e 
= Drag.fixE(e);
        
var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
        
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
        o.root.onDragStart(x, y);

        o.lastMouseX    
= e.clientX;
        o.lastMouseY    
= e.clientY;

        
if (o.hmode) {
            
if (o.minX != null)    o.minMouseX    = e.clientX - x + o.minX;
            
if (o.maxX != null)    o.maxMouseX    = o.minMouseX + o.maxX - o.minX;
        } 
else {
            
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
            
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
        }

        
if (o.vmode) {
            
if (o.minY != null)    o.minMouseY    = e.clientY - y + o.minY;
            
if (o.maxY != null)    o.maxMouseY    = o.minMouseY + o.maxY - o.minY;
        } 
else {
            
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
            
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
        }

        document.onmousemove    
= Drag.drag;
        document.onmouseup        
= Drag.end;

        
return false;
    },

    drag : 
function(e)
    {
        e 
= Drag.fixE(e);
        
var o = Drag.obj;

        
var ey    = e.clientY;
        
var ex    = e.clientX;
        
var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
        
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
        
var nx, ny;

        
if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
        
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
        
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
        
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);

        nx 
= x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
        ny 
= y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));

        
if (o.xMapper)        nx = o.xMapper(y)
        
else if (o.yMapper)    ny = o.yMapper(x)

        Drag.obj.root.style[o.hmode 
? "left" : "right"= nx + "px";
        Drag.obj.root.style[o.vmode 
? "top" : "bottom"= ny + "px";
        Drag.obj.lastMouseX    
= ex;
        Drag.obj.lastMouseY    
= ey;

        Drag.obj.root.onDrag(nx, ny);
        
return false;
    },

    end : 
function()
    {
        document.onmousemove 
= null;
        document.onmouseup   
= null;
        Drag.obj.root.onDragEnd(    parseInt(Drag.obj.root.style[Drag.obj.hmode 
? "left" : "right"]), 
                                    parseInt(Drag.obj.root.style[Drag.obj.vmode 
? "top" : "bottom"]));
        Drag.obj 
= null;
    },

    fixE : 
function(e)
    {
        
if (typeof e == 'undefined') e = window.event;
        
if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
        
if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
        
return e;
    }
};



在这里我没有应用CSDN 的代码折叠效果,因为这样更方便大家直接复制其源码便用,如果加了折折叠效果复制后的源码里面常常会有多余的代码。

2.  点击图层如何让他居顶的方法

<script type="text/javascript">
        var div_z_index=1;
        function zIndexAdd(divId)
        {
            var divObject=document.getElementById(divId);  
              
            div_z_index++;
           
            divObject.style.zIndex=div_z_index;
           
            //请注意:这里是 zIndex 千万不要写成 z-index 否则会出错的
        }
    </script>

然后在最外层图层调用这个方法即可了 如:onclick="zIndexAdd('mydiv1')"

阅读更多
个人分类: (3)Web
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭