兼容性很好的JS拖拽

<script language="javascript" type="text/javascript">
    //==================================================================================
    //拖动鼠标时用到的JS
    //==================================================================================
    var oldX, oldY;    // 记录鼠标移动事件发生前鼠标的位置
    var dragElem;    // 记录被拖曳的对象

    function $(nodeId) {
        return document.getElementById(nodeId);
    }
    // 获得事件发生的主体
    function getEventElement(evt) {
        evt = evt || event;
        return evt.srcElement || evt.target;
    }
    // 获取结点的计算样式
    function getStyle(node) {
        return node.currentStyle || document.defaultView.getComputedStyle(node, null);
    }
    // 拖动的动作
    function drag(evt) {
        evt = evt || event;    // 为了兼容IE和firefox,firefox执行evt,IE则执行evt=event
        var node = dragElem;

        if (node != null) //if语句是我(苏本东)后来加上去的
        {
            node.style.top = parseInt(getStyle(node).top || 0) + evt.clientY - oldY + 'px';
            node.style.left = parseInt(getStyle(node).left || 0) + evt.clientX - oldX + 'px';
            //node.style.right=parseInt(getStyle(node).right||0)-evt.clientX+oldX+'px';
            //0px 越往左越小 930px
            oldX = evt.clientX, oldY = evt.clientY;
        }
    }
    // 拖动开始
    // 注册拖曳结束时的执行函数
    // 注册拖曳事件的执行函数
    function drag_start(evt, nodeId) {
        evt = evt || event;
        oldX = evt.clientX;
        oldY = evt.clientY;
        dragElem = $(nodeId);
        getEventElement(evt).onmouseup = drag_end;
        getEventElement(evt).onmousemove = drag;
    }
    // 对 drag_start 进行了改良
    function drag_start2(evt, nodeId) {
        evt = evt || event;
        oldX = evt.clientX;
        oldY = evt.clientY;
        dragElem = $(nodeId);

        document.body.onmousemove = drag;
        document.body.onmouseup = drag_end;
    }
    // 拖曳结束,释放onmousemove事件执行函数
    function drag_end(evt) {
        evt = evt || event;
        dragElem = null;
        getEventElement(evt).onmousemove = null;
        getEventElement(evt).onmouseup = null;
    }
    function close_box(obj_1) {//先隐藏,再清除建立的对象。不这样做,会有问题。
        $(obj_1).style.display = "none";

        document.body.removeChild($(obj_1));
    }
    var index = 10000;
    function UpDivs(obj_1) {
        if ($(obj_1).style.zIndex != index) {
            index = index + 2;
            var idx = index;
            $(obj_1).style.zIndex = idx;
            // document.body.removeChild($(obj_1));
        }
    }
</script>

转载于:https://www.cnblogs.com/xfxr/archive/2010/06/08/1754213.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值