javascript完美拖拽的实现方法


Posted in Javascript onSeptember 29, 2013

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);
};

欢迎批评指正!!!
Javascript 相关文章推荐
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
JS实现购物车基本功能
Nov 08 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 #Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 #Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 #Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 #Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 #Javascript
jquery事件与函数的使用介绍
Sep 29 #Javascript
Jquery选中或取消radio示例
Sep 29 #Javascript
You might like
php自动获取目录下的模板的代码
2010/08/08 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
PHP实现八皇后算法
2019/05/06 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
python编写计算器功能
2019/10/25 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
技术人员面试提纲
2013/11/28 职场文书
大学生个人简历中的自我评价
2013/12/27 职场文书
内业资料员岗位职责
2014/01/04 职场文书
买房协议书
2014/04/11 职场文书
民事授权委托书范文
2014/08/02 职场文书
关于环保的活动方案
2014/08/25 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
JavaScript中reduce()的用法
2022/05/11 Javascript