注意事项：

1、opacity是全部元素变透明，rgba只是背景色变透明

2、先是注册鼠标按下的事件，此时就需要记录鼠标在盒子中的坐标

3、再在鼠标按下事件中注册鼠标移动事件，此时鼠标的坐标是不断变化的，盒子的坐标就是鼠标的坐标减去鼠标在盒子的坐标

4、top.onmousemove = function (ev) {}，top也可以换成document，主要考虑的是鼠标移动的太快出了盒子，改为document可以继续维持这个事件

5、在top.onmousemove中必须取消文本被选中，不然拖拽的时候，如果选中了文字，会出现bug，选中的文字会首先被拖走，影响效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .box {

            width: 200px;

            height: 180px;

            background-color: #ccc;

            position: absolute;

            top: 100px;

            left: 200px;

        }

        .top {

            height: 30px;

            text-align: center;

            font: 400 15px/30px "simsun";

            background-color: pink;

            cursor: move;

        }

    </style>

</head>

<body>

<div class="box">

    <div class="top">点击此处拖拽盒子</div>

</div>

<script>

    var box = document.getElementsByTagName("div")[0];

    var top = box.children[0];

    //点击盒子 然后拖拽

    //鼠标左键点击事件 鼠标移动事件

    top.onmousedown = function (ev) {

        ev = ev || window.event;

        //1、鼠标的坐标

        var pageX = ev.pageX || scroll().left + ev.clientX;

        var pageY = ev.pageY || scroll().top + ev.clientY;

        //2、鼠标在盒子中的坐标

        var x = pageX - box.offsetLeft;

        var y = pageY - box.offsetTop;

        top.onmousemove = function (ev) {

            //3、进入onmousemove事件，鼠标左边不断更新

            var pageX = ev.pageX || scroll().left + ev.clientX;

            var pageY = ev.pageY || scroll().top + ev.clientY;

            ev = ev || window.event;

            box.style.left = pageX - x + "px";

            box.style.top = pageY - y + "px";

            box.style.opacity = 0.4;

            //取消文本被选中

            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

        }

    }

    //解绑

    top.onmouseup = function () {

        top.onmousemove = null;

        box.style.opacity = 1;

    }

    function scroll() {

        return {

            "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,

            "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft

        };

    }

</script>

</body>

</html>

JS——拖拽盒子的更多相关文章

  1. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  2. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  3. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

  5. js拖拽分析

    js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left ...

  6. JS拖拽div（移动）

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  7. 浅谈js拖拽

    本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...

  8. 一步一步实现JS拖拽插件

    js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...

  9. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

随机推荐

  1. [K/3Cloud]关于"选单"操作

    之前有些人对这块有些疑问,比如: 1.选单操作是否和下推基本一样,都是公用同一套单据转换规则,只不过下推是源单推目标单,选单是目标单去选择源单,最终操作结果一样? 2,我想实现选单的时候,选单列表先通 ...

  2. JRobin绘制指定时间段的流量图

    http://www.micmiu.com/enterprise-app/snmp/jrobin-graph-rpn/

  3. - > 贪心基础入门讲解一——完美字符串

    约翰认为字符串的完美度等于它里面所有字母的完美度之和.每个字母的完美度可以由你来分配,不同字母的完美度不同,分别对应一个1-26之间的整数. 约翰不在乎字母大小写.(也就是说字母F和f)的完美度相同. ...

  4. MySQL出现：com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure Last packet sent to the server was 0 ms ago.

    1.首先检查生产环境的机器是否ping的通和telnet的通数据库 2.排查数据库连接的参数 3.看数据量是否很大 参考: http://blog.csdn.net/sclxf/article/det ...

  5. oc 和swift混编的时候打包ipa安装不了

    做了一个oc项目.里面实用到swift第三方,真机执行的时候是正常的,用企业级证书打包成ipa之后安装完毕之后闪退.通过导出手机log日志发现错误提示: Dyld Error Message:   L ...

  6. 5.Swift教程翻译系列——Swift字符串和字符

    英文版PDF下载地址http://download.csdn.net/detail/tsingheng/7480427 字符串是一组字符的有序序列,比方"hello,china"或 ...

  7. mac 下安装caffe(二）

    使用Anaconda Python 1.brew edit opencv args << "-DPYTHON_LIBRARY=#{py_lib}/libpython2.7.#{d ...

  8. POJ 3683 Priest John&#39;s Busiest Day (2-SAT+输出可行解)

    题目地址:POJ 3683 第一次做须要输出可行解的题目. . .大体思路是先用强连通来推断是否有可行解,然后用逆序建图.用拓扑排序来进行染色.然后输出可行解. 详细思路见传送门 由于推断的时候少写了 ...

  9. 浅析Linux字符设备驱动程序内核机制

    前段时间在学习linux设备驱动的时候,看了陈学松著的<深入Linux设备驱动程序内核机制>一书. 说实话.这是一本非常好的书,作者不但给出了在设备驱动程序开发过程中的所须要的知识点(如对 ...

  10. 专訪印度电商Snapdeal CEO：学阿里还是京东

    [摘要]印度的互联网正成资本关注下一个投资焦点,也可能成中国互联网企业走向海外的桥头堡.为此.腾讯科技最近将推出走近印度"硅谷"系列文章,帮助大家了解印度互联网. 腾讯科技与Sna ...