脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript完美拖拽

javascript完美拖拽的实现方法

 更新时间：2013年09月29日 16:42:10   作者：  
这篇文章介绍了javascript完美拖拽的实现方法，有需要的朋友可以参考一下
HTML代码：
复制代码 代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="drag.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
    <div id="login">
        <h2>网站登录</h2>
        <div class="user">
            用户名：<input type="text" name="user" class="txt" />
        </div>
        <div class="pass">
            密　码：<input type="password" name="pass" class="txt" />
        </div>
        <div class="submit">
            <input type="submit" value="登录" class="button" />
        </div>
    </div>
</body>
</html>

CSS代码：
复制代码 代码如下:

body, h2 {
    margin:0;
    padding:0;
}
#login {
    width:350px;
    height:250px;
    border:1px solid #ccc;
    position:absolute;
    left:512px;
    top:300px;
}
#login h2 {
    font-size:14px;
    text-align:center;
    height:30px;
    line-height:30px;
    background:#f60;
    color:white;
    cursor:move;
    margin-bottom:30px;
    letter-spacing:1px;
}
#login .user, #login .pass {
    text-align:center;
    font-size:12px;
    height:60px;
    line-height:40px;
}
#login .txt {
    width:200px;
    border:1px solid #ccc;
    background:#fff;
    height:30px;
    line-height:30px;
}
#login .submit {
    text-align:right;
}
#login .button {
    width:100px;
    height:30px;
    background:#06f;
    border:none;
    cursor:pointer;
    margin:10px 30px;
    color:white;
    letter-spacing:1px;
    font-weight:bold;
}

拖拽核心代码：
复制代码 代码如下:

function drag(obj) {
    if (typeof obj === 'string') {
        var obj = document.getElementById(obj);
    } else {
        var obj = obj;
    }
    function fixEvent(event) {
        event.target = event.srcElement;
        event.preventDefault = fixEvent.preventDefault;
        return event;
    }
    fixEvent.preventDefault = function () {
        this.returnValue = false;
    };
    obj.onmousedown = mousedown;
    function mousedown(e) {
        var e = e || fixEvent(window.event);
        var disX = e.clientX - obj.offsetLeft;
        var disY = e.clientY - obj.offsetTop;
        if (e.target.tagName === 'H2') {
            document.onmousemove = move;
            document.onmouseup = up;
        } else {
            document.onmousemove = null;
            document.onmouseup = null;           
        }
        function move(e) {
            var e = e || fixEvent(window.event);
            var left = e.clientX - disX;
            var top = e.clientY - disY;
            if (obj.setCapture) {
                obj.setCapture();
            }
            if (left < 0) {
                left = 0;
            } else if (left > document.documentElement.clientWidth - obj.offsetWidth) {
                left = document.documentElement.clientWidth - obj.offsetWidth;
            }
            if (top < 0) {
                top = 0;
            } else if (top > document.documentElement.clientHeight - obj.offsetHeight) {
                top = document.documentElement.clientHeight - obj.offsetHeight;
            }
            obj.style.left = left + 'px';
            obj.style.top = top + 'px';
            return false;
        };
        function up() {
            if (obj.releaseCapture) {
                obj.releaseCapture();
            }
            document.onmousemove = null;
            document.onmouseup = null;
        }
    };
}

调用代码：
复制代码 代码如下:

window.onload = function () {
    var login = document.getElementById('login');
    drag(login);
};

欢迎批评指正！！！
您可能感兴趣的文章:

相关文章

  • js获取元素的标签名实现方法

    js获取元素的标签名实现方法

    下面小编就为大家带来一篇js获取元素的标签名实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 每天一篇javascript学习小结（Boolean对象）

    每天一篇javascript学习小结（Boolean对象）

    这篇文章主要介绍了javascript中的Boolean对象知识点，对Boolean对象的基本使用方法进行解释，一段很详细的代码介绍，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 深入了解JavaScript中的函数柯里化

    深入了解JavaScript中的函数柯里化

    JavaScript函数柯里化是一种将接受多个参数的函数转换为一系列接受单个参数的函数的技术。本文将通过简单的示例为大家详细讲讲函数柯里化的相关应用，需要的可以参考一下
    2023-04-04
  • js 下拉菜单点击旁边收起实现(踩坑记)

    js 下拉菜单点击旁边收起实现(踩坑记)

    这篇文章主要介绍了js 下拉菜单点击旁边收起实现(踩坑记)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 点击显示指定元素隐藏其他同辈元素的方法

    点击显示指定元素隐藏其他同辈元素的方法

    点击显示指定元素并隐藏其他同辈元素，下面有个不错的方法,需要的朋友可以参考下
    2014-02-02
  • JavaScript用二分法查找数据的实例代码

    JavaScript用二分法查找数据的实例代码

    本篇文章主要介绍了JavaScript用二分法查找数据的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 微信小程序bindtap与catchtap的区别详解

    微信小程序bindtap与catchtap的区别详解

    本文主要介绍了微信小程序bindtap与catchtap的区别详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • javascript对象的相关操作小结

    javascript对象的相关操作小结

    下面小编就为大家带来一篇javascript对象的相关操作小结。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • js实现横向百叶窗效果网页切换动画效果的方法

    js实现横向百叶窗效果网页切换动画效果的方法

    这篇文章主要介绍了js实现横向百叶窗效果网页切换动画效果的方法,实例分析了javascript实现百叶窗效果的技巧,需要的朋友可以参考下
    2015-03-03
  • 微信小程序自定义导航教程（兼容各种手机）

    微信小程序自定义导航教程（兼容各种手机）

    这篇文章主要给大家介绍了关于微信小程序自定义导航的相关内容，文中通过示例代码介绍的非常详细，兼容各种手机,对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12

最新评论