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插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 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下网站防IP攻击代码,超级实用
2010/10/24 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python使用matplotlib画饼状图
2018/09/25 Python
python批量赋值操作实例
2018/10/22 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
pandas计数 value_counts()的使用
2019/06/24 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
Shell如何接收变量输入
2016/08/06 面试题
外贸业务员的岗位职责
2013/11/23 职场文书
门前三包责任书
2014/04/15 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python
Go timer如何调度
2021/06/09 Golang
springboot中的pom文件 project报错问题
2022/01/18 Java/Android
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript