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 相关文章推荐
Dom 结点创建 基础知识
Oct 01 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 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中使用base HTTP验证的方法
2015/04/20 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
Javascript缓存API
2016/06/14 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
python决策树之CART分类回归树详解
2017/12/20 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
如何在python中执行另一个py文件
2020/04/30 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
警察思想汇报
2014/01/04 职场文书
保险专业自荐信范文
2014/02/20 职场文书
詹天佑教学反思
2014/04/30 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
学校安全责任书范本
2014/07/23 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
Python多个MP4合成视频的实现方法
2021/07/16 Python