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 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
Jquery 滑入滑出效果实现代码
Mar 27 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
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
discuz安全提问算法
2007/06/06 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
python最长回文串算法
2018/06/04 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python实现多线程端口扫描
2019/08/31 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
python递归函数用法详解
2020/10/26 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
数控机床专业自荐信
2014/05/19 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
写给导师的自荐信
2015/03/06 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
初一语文教学反思
2016/03/03 职场文书
请假条应该怎么写?
2019/06/24 职场文书
python实现简单倒计时功能
2021/04/21 Python
golang内置函数len的小技巧
2021/07/25 Golang