Bingochuan

追求复用,享受编程！

导航

自己写了一个鼠标拖动层的javascript脚本

Posted on 2006-11-26 15:22  BingoChuan  阅读(1222)  评论(3)    收藏  举报

        现在ajax越来越火，越来越多的web程序都要实现的像桌面程序一样，当然少不了鼠标的一个拖动效果。找了网上一些鼠标拖动层的代码，要么效果很不错但是代码很长，很难提取出来复用，要么就是拖动效果不好，因此，我决定自己写一个可以以后复用的鼠标拖动层代码,花了3个钟头，终于写出来了，虽然拖动过程没有像有些代码一个有很绚丽很豪华的效果，但是我觉得还是挺满意的，至少以后可以复用。
        代码的基本思想是：把要拖动的控件（可以是table,div,input等任何html标签）看成是元素（element）,然后这些元素需要有一个空间让他们可以拖动，我把这个称作容器(container)，把在容器里面鼠标的拖动距离加到元素的style.left和style.top那里，那么元素的位置就发生改变，这样就实现了拖动的效果。
        代码的使用方法，就像下面的示例一样，首先要指定一个container,我这里是把body作为container,所以给body一个属性dragType="container"，然后在这个container的内部指定一个或者多个你要移动的元素，我这里移动的是一个table，因此，给table加一个属性dragType="element"，注意element一定要是container的子节点。最后，需要一个动作来让开启这个拖动效果，等于一个开关的作用，这里我需要页面加载的时候就可以让鼠标拖动，因此我把enableDragElements()函数放在了body的onload事件里面，这样就可以了,运行页面，就可以用鼠标拖动了。

/**********************************************************************************
//文件说明

 文件名：DragLayerBuilder.js
 描述：使页面上的元素能够让鼠标拖动
 作者：bingo.chuan
 最后修改日期：2006年11月24日
 示例：
 <body id="body" onload="enableDragElements()" dragType="container">
    <table id="table1" border="1" cellpadding="0" cellspacing="0" dragType="element">
        <tr>
            <td colspan="3">标题1
            </td>
        </tr>
        <tr>
            <td>aa:
            </td>
            <td>
                <input id="Text1" type="text" />
            </td>
            <td>label1
            </td>
        </tr>
        <tr>
            <td>bb:
            </td>
            <td>
                <input id="Text2" type="text" />
            </td>
            <td>label2
            </td>
        </tr>
    </table>
</body>

**********************************************************************************/
//attribute：属性

//当前存放移动元素的容器
var container = null;

//当前正在移动的元素
var draggingElement = null;

//存放拖拉过程的点位置
var oldLeft = 0;
var oldTop = 0;

//是否要开启透明效果
var enableOpacity = true;

/*********************************************************************************/
//public : 对外开放的接口
function enableDragElements()
{
    for(var i=0;i<document.all.length;i++)
    {
        if(document.all[i].dragType && document.all[i].dragType == "container")
        {
            container = document.all[i];
            container.style.height = "100%";
            container.onmousedown = doContainerMouseDown;
            container.onmouseup = doContainerMouseUp;
            container.onmousemove = doContainerMouseMove;
        }
        if(document.all[i].dragType && document.all[i].dragType == "element")
        {
            document.all[i].style.position = "absolute";
            document.all[i].style.left = document.all[i].style.left ? document.all[i].style.left:0;
            document.all[i].style.top = document.all[i].style.top ? document.all[i].style.top:0;
        }
    }
    
    
}

/*********************************************************************************/
//private : 内部方法
function doContainerMouseDown()
{
    draggingElement = event.srcElement;
    if(draggingElement == null)
    {
        return;
    }
    else
    {
        oldLeft = event.x;
        oldTop = event.y;
        while( draggingElement && (!draggingElement.dragType || draggingElement.dragType != "element"))
        {
            draggingElement = draggingElement.parentElement;
        }
        container = draggingElement;
        while( draggingElement && (!container.dragType || container.dragType != "container"))
        {
            container = container.parentElement;
        }
    }
}

function doContainerMouseMove()
{
    if(draggingElement && draggingElement.dragType && draggingElement.dragType == "element")
    {
        if(draggingElement !=null && enableOpacity)
        {      
            draggingElement.style.filter = "Alpha(opacity=30)";
        }
         var left = parseInt(draggingElement.style.left.replace("px",""));
         var top = parseInt(draggingElement.style.top.replace("px",""));
         
         draggingElement.style.left = left + event.x - oldLeft;
         draggingElement.style.top = top + event.y - oldTop;
         oldLeft = event.x;
         oldTop = event.y;
    }
}

function doContainerMouseUp()
{
    if(draggingElement !=null && enableOpacity)
    {      
        draggingElement.style.filter = "Alpha(opacity=100)";
    }
    draggingElement = null;
}


 

示例下载