直接上代码：

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">

            <span>用户名：</span><input type="text" name="user" class="txt" />

        </div>

        <div class="pass">

            <span>密　码：</span><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:;

    padding:;

}

#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:60px;

}

#login .user span, #login .pass span {

    *position:relative;

    *bottom:8px;

}

#login .txt {

    width:184px;

    border:1px solid #ccc;

    background:#fff;

    height:20px;

    padding:5px 8px;

    line-height:20px;

}

#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 trim(str) {

        return str.replace(/(^\s*)|(\s*$)/, '');

    }

    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 (trim(obj.innerHTML) === 0) {

            e.preventDefault();

        }

        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';

        };

        function up() {

            if (obj.releaseCapture) {

                obj.releaseCapture();

            }

            document.onmousemove = null;

            document.onmouseup = null;

        }

    };

}

调用代码：

window.onload = function () {

    var login = document.getElementById('login');

    drag(login);

};

欢迎批评指正！！！

javascript完美拖拽的实现的更多相关文章

  1. 完美拖拽 &&仿腾讯微博效果&& 自定义多级右键菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

    这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...

  3. javascript鼠标拖拽的那些事情

    <html> <head> <title>javascript鼠标拖拽的那些事情</title> <meta http-equiv="C ...

  4. JavaScript动画-拖拽改变元素大小

    ▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...

  5. Javascript之拖拽库

    在手机上运行触屏拖动时,我发现页面并没有反应,服务器端执行javascript在手机端与电脑端不能“相同式”实现(电脑端运行正常,而手机端不一样),这是为甚么呢? 首先,我们都知道javascript ...

  6. Javascript自由拖拽类

    基本拖拽配置 new Dragdrop({target 拖拽元素 HTMLElemnt 必选bridge 指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到 dragable 是否可拖拽 (true ...

  7. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

  8. JavaScript鼠标拖拽特效及相关问题总结

    #div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...

  9. html --- javascript --- div --- 拖拽方块

    当鼠标拖拽的很快时,光标会走出方块,所以把事件注册在了方块的父节点上, 如有疑问请参照:http://blog.csdn.net/a9529lty/article/details/2708171 使用 ...

随机推荐

  1. 7. Reverse Integer【Leetcode by java】

    Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Output: 321 Examp ...

  2. 上云利器，K8S应用编排设计器之快到极致

    前言在前面的文章中,我们已经提到,华为云有一个上云利器:应用编排设计器.作为华为云应用编排服务与用户沟通的桥梁,设计器坚持用户体验至上的理念,以图形化方式,在鼠标点击之间,助力企业快速上云.优质的交互 ...

  3. PAT-1003 Emergency（Dijkstra）

    1003 Emergency (25 分) As an emergency rescue team leader of a city, you are given a special map of y ...

  4. VGGNet论文翻译-Very Deep Convolutional Networks for Large-Scale Image Recognition

    Very Deep Convolutional Networks for Large-Scale Image Recognition Karen Simonyan[‡] & Andrew Zi ...

  5. RN热更新

    说白了集成RN业务,就是集成RN离线包,解析并渲染.所以,RN热更新的根本原理就是更换js bundle文件和资源文件,并重新加载,新的内容就完美的展示出来了. 目前市场上出现的3种热更新模式如下:仅 ...

  6. 20135316Linux内核学习笔记第五周

    20135316王剑桥<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.给MenuOS增加time和t ...

  7. jqGrid属性中文详细说明

    jqGrid属性中文详细说明 jqGrid的属性很多,其实很大部分的属性,使用其默认值就可以了.但是详细了解一下属性的含义以及作用,对我们定制自己的grid是有帮助的. 以下内容描述格式是:属性名称 ...

  8. 通俗易懂的word2Vec负采样理解

    理解:http://www.shuang0420.com/2017/03/21/NLP%20%E7%AC%94%E8%AE%B0%20-%20%E5%86%8D%E8%B0%88%E8%AF%8D%E ...

  9. [转帖]ESXi、Linux、Windows获取机器序列号的方法

    http://blog.51cto.com/liubin0505star/1717473 windows: wmic bios get serialnumber linux: dmidecode准确一 ...

  10. ssh中文乱码解决

    在终端执行命令:export LC_ALL=zh_CN.GB2312;export LANG=zh_CN.GB2312是最有效的.=======================1.不管用那种ssh客户 ...