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

原创 2007年10月13日 13:17:00
实现效果如图:
 

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')"

JS+CSS实现几个DIV层上下移动交换位置的效果

JS+CSS实现几个DIV层上下移动交换位置的效果 /* ul{   width:400px } li{   border:1px solid gray;   list-style:...
  • u011425213
  • u011425213
  • 2013年07月22日 10:34
  • 3296

css和js实现最简单的轮播图效果

css和js实现最简单的轮播图效果 之前见网上的轮播图太复杂了,所以我来写一个最简单的,实现的灵感来自于《JavaScript DOM编程艺术》一书。 目录css和js实现最简单的轮播图效果实现原...
  • tom9238
  • tom9238
  • 2017年04月16日 12:56
  • 1892

一个十分简单的div弹出层小例子

一个十分简单的div弹出层小例子
  • jdfkldjlkjdl
  • jdfkldjlkjdl
  • 2014年09月15日 21:41
  • 9197

JS实现点击复选框变更DIV显示状态实例

首先是页面上: *是否存在促销活动:   *现价: ...
  • u011199063
  • u011199063
  • 2017年01月07日 14:02
  • 775

js实现:点击一个按钮,弹出一个div,并向其中传值,修改后,再传出

class="panel-body"> id="tbList" class="table footable" data-sort="false" > clas...
  • xinliuqianxue
  • xinliuqianxue
  • 2015年10月15日 10:46
  • 3488

用js给div绑定事件,实现点击切换效果的几种方式总结

用js给div绑定事件,实现点击切换效果,总结有如下几种方式 script type="text/javascript"> function btnAction() { var ...
  • sunnyboy9
  • sunnyboy9
  • 2017年05月18日 23:53
  • 1509

js实现两个div左右并列显示,并实现点击标题,切换内容显示

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-stri...
  • niuxinzan
  • niuxinzan
  • 2013年09月27日 16:20
  • 2035

用JS实现和google地图类似的图片查看器-----放大、缩小、移动和还原,都控制在div里,兼容ie,FF

  • 2009年04月09日 18:01
  • 283KB
  • 下载

sitemesh实现页面Js及Css简单化(java)

你的html或jsp还在每个页面都加载同样的js/css吗?或者是每个页面都在import其他页面? 现在说的就是简化这些操作,不要让你的代码冗余这么多重复的东西,让sitemesh来帮助你吧。看下...
  • safasfafa
  • safasfafa
  • 2016年06月17日 16:56
  • 900

属性动画图片从上移动到屏幕中间,放大图片的二倍再缩小到原来,自定义圆实现倒计时,解析数据显示,点击条目实现js交互

//主页面 public class MainActivity extends AppCompatActivity {     private ProgressBarView pbv; ...
  • halaoda
  • halaoda
  • 2017年10月25日 09:05
  • 108
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[Web]如何利用js库dom-drag.js最简单化实现移动图层和点击实现div居上问题
举报原因:
原因补充:

(最多只允许输入30个字)