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 相关文章推荐
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
理解javascript中的严格模式
Feb 01 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
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
2021年最新CPU天梯图
2021/03/04 数码科技
php横向重复区域显示二法
2008/09/25 PHP
php实现aes加密类分享
2014/02/16 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
JQuery循环滚动图片代码
2011/12/08 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
详解redux异步操作实践
2018/08/15 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
Python的time模块中的常用方法整理
2015/06/18 Python
判断网页编码的方法python版
2016/08/12 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
童装店创业计划书
2014/01/09 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
环保建议书600字
2014/05/14 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
企业法人代表证明书
2014/09/27 职场文书
中秋晚会致辞
2015/07/31 职场文书
详解Nginx 工作原理
2021/03/31 Servers
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL