• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
雪飞夏日
博客园    首页    新随笔    联系   管理    订阅  订阅
兼容性很好的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>

posted on 2010-06-08 18:19  雪飞夏日  阅读(275)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3