知识点（鼠标跟随）：

  1. mousedown: 当用户用鼠标点击在某一元素上就会触发该事件
  2. mouseover:  当鼠标指针在某一元素上移动就会触发改事件

下面这个例子的效果就是鼠标点击元素后，元素跟着鼠标移动

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8" />

    <title>独秀不爱秀</title>

    <style type="text/css">

        * {

            padding: 0;

            margin: 0;

        }

        #one {

            width: 100px;

            height: 100px;

            background-color: red;

            position: absolute;

        }

    </style>

</head>

<body>

    <div id="one"></div>

    <script type="text/javascript">

        window.onload = function () {

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

            // mousedown鼠标事件：当用户点击鼠标在元素上就会触发该事件

            one.addEventListener('mousedown', function () {

                // mousemove 鼠标事件：当鼠标指针在元素上移动就会触发此事件

                /**

                 * e：指事件，在火狐浏览器中事件用window.event,所以只有把 event

                 *    所以只有把event传给函数使用。为了兼容火狐和浏览器，一般会在函数里自动

                 *    重新赋值: e = e || window.event;

                */

                document.addEventListener('mousemove', function (e) {

                    one.style.left = e.clientX + 'px';

                    one.style.top = e.clientY + 'px';

                });

            });

        }

    </script>

</body>

</html>

知识点（鼠标拖拽）

  1. dragstart: 用户开始拖拽时触发该事件
  2. drag:        用户正在拖拽时触发该事件
  3. dragend:  用户结束拖拽时触发该事件

　　以上3个事件的控制对象为被拖拽的元素 （整个过程我们可以称之为拖拽区）

  1. dragenter: 当被拖拽的元素对象进入其容器范围内时触发该事件
  2. dragover:  当被拖拽的元素对象在其容器范围内拖拽时触发该事件
  3. dragleave: 当被拖拽的元素对象离开其容器范围内触发该事件
  4. drop:          在一个拖拽过程中，鼠标释放触发该事件

　　以上4个事件的控制对象为被拖追元素的目的容器（整个过程我们可以称之为投放区）

实例1（将一个容器拖放到另一个容器中）

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8" />

    <title>独秀不爱秀</title>

    <style type="text/css">

        * {

            padding: 0;

            margin: 0;

        }

        #one {

            width: 200px;

            height: 200px;

            border: 1px solid rebeccapurple;

        }

        #two {

            width: 100px;

            height: 100px;

            background-color: red;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div id="one"></div><br>

    <!-- draggable属性：设置改元素是否能够被拖拽 -->

    <div id="two" draggable="true"></div>

    <script type="text/javascript">

        window.onload = function () {

            function $(id) {

                return document.getElementById(id);

            }

            // 鼠标拖拽事件(注意控制对象为被拖拽的元素)

            // dragstart: 用户开始拖拽时触发

            $('two').addEventListener('dragstart', function (e) {

                // $('one').innerHTML = '开始拖拽';

            });

            // drag: 用户正在拖拽时触发

            $('two').addEventListener('drag', function (e) {

                // $('one').innerHTML = '移动当中';

            });

            // dragend:用户结束拖拽时触发

            $('two').addEventListener('dragend', function (e) {

                // $('one').innerHTML = '移动结束';

            });

            // 投放过程事件(注意控制对象为拖拽元素的目的地元素)

            // dragenter: 当被拖拽的元素对象进入其范围内时触发

            $('one').addEventListener('dragenter', function (e) {

                // $('one').innerHTML = '进入';

                e.preventDefault();     // 阻止默认事件

            });

            // dragover: 当被拖拽的元素对象在该容器范围内拖拽时触发

            $('one').addEventListener('dragover', function (e) {

                // $('one').innerHTML += '我就在里面';

                e.preventDefault();     // 阻止默认事件（拖动的默认事件为在新窗口中打开）
            });

            // dragleave: 当被拖拽的元素对象离开其容器范围内触发

            $('one').addEventListener('dragleave', function (e) {

                // $('one').innerHTML += '离开';

                e.preventDefault();     // 阻止默认事件

            });

            // 投放事件(注意控制对象为拖拽元素的目的地元素)

            // drop: 在一个拖动过程中，鼠标释放触发

            $('one').addEventListener('drop', function () {

                $('one').appendChild($('two'));

            });

        }

    </script>

</body>

</html>

实例2(文件拖拽上传)

　　前端代码：

　　

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8" />

    <title>独秀不爱秀</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        #box {

            width: 200px;

            height: 200px;

            border: 2px dashed #ccc;

        }

    </style>

</head>

<body>

    <div id="box">请拖入文件进行上传！很炫酷哟！</div>

    <script type="text/javascript">

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

        box.addEventListener('dragenter', function (e) {

            e.preventDefault();

        });

        box.addEventListener('dragover', function (e) {

            box.innerHTML = '已有东西进入，请松开';

            e.preventDefault();

        });

        box.addEventListener('dragleave', function (e) {

            box.innerHTML = '赶紧回来';

            e.preventDefault();

        });

        box.addEventListener('drop', function (e) {

            box.innerHTML = '已经松开';

            // console.log(e.dataTransfer.files[0]);

            // lastModified: 1561646705661

            // lastModifiedDate: Thu Jun 27 2019 22: 45: 05 GMT + 0800(中国标准时间) { }

            // name: "个人简历.pdf"

            // size: 196022

            // type: "application/pdf"

            var file = e.dataTransfer.files[0];

            var fd = new FormData();

            fd.append('pic', file);

            var xhr = new XMLHttpRequest();

            xhr.open('post', '3-3.php');

            xhr.send(fd);

            xhr.addEventListener('readystatechange', function () {

                if (this.readyState === 4) {

                    // console.log(1111);

                    // console.log(this.responseText);

                    box.innerHTML += this.responseText;

                }

            });

            e.preventDefault();

        });

    </script>

</body>

</html>

　　后端代码（PHP实现）：

　　

if (isset($_FILES)) {

    $orgin = $_FILES['pic']['tmp_name'];

    $target = $_FILES['pic']['name'];

    $moved = move_uploaded_file($orgin, './' . $target);

    if (!$moved) {

        echo '上传失败';

    }

    echo ', 且上传成功';

}

　　当我们将某一文件（这里我用一张图片）拖f放到这个容器中后，这个图片就到了这个指定得文件夹中。

HTML5深入学习之鼠标跟随，拖拽事件的更多相关文章

  1. HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

    多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...

  2. Qt窗口添加鼠标移动拖拽事件

    1. .h文件中添加 private:    QPoint dragPosition; 2. 在cpp文件中重写鼠标点击和拖拽函数 void ShapeWidget::mousePressEvent( ...

  3. HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

    可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...

  4. HTML5实战与剖析之原生拖拽(一拖拽历史概述)

    提起拖拽,我就想起了在JavaScript培训的时候一个非常好玩的效果,那就是拖拽了.可以用鼠标任意拖拽着一个物体到任何你想去的地方. 最早拥有JavaScript拖拽功能的是IE4浏览器.当时,网页 ...

  5. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  6. day50—JavaScript鼠标拖拽事件

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

  7. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 完美实现鼠标拖拽事件，解决各种小bug，基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

  9. H5原生拖拽事件

    使用原生js实现简单的拖拽事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

随机推荐

  1. 网络编程 UDP协议 TCP局域网客户端与服务端上传下载电影示例

    UDP协议 (了解) 称之为数据包协议,又称不可靠协议. 特点: 1) 不需要建立链接. 2) 不需要知道对方是否收到. 3) 数据不安全 4) 传输速度快 5)能支持并发 6) 不会粘包 7) 无需 ...

  2. 解决——》java.lang.IllegalArgumentException: Body parameter 0 was null

    1.操作2.现象(错误信息)3.原因错误代码:4.解决1)方案一:@RequestBody(required=false)2)方案二:传参数时限制authSession不能为空ody paramete ...

  3. Pandas | 27 注意事项&窍门

    警告和疑难意味着一个看不见的问题.在使用Pandas过程中,需要特别注意的地方. 与Pandas一起使用If/Truth语句 当尝试将某些东西转换成布尔值时,Pandas遵循了一个错误的惯例. 这种情 ...

  4. django认证系统-user对象(创建，改密，认证)

    User对象 User对象是认证系统的核心.它们通常表示与你的站点进行交互的用户,并用于启用限制访问.注册用户信息和关联内容给创建者等.在Django的认证框架中只存在一种类型的用户,因此诸如'sup ...

  5. 【转】C++ 异常机制分析

    阅读目录 C++异常机制概述 throw 关键字 异常对象 catch 关键字 栈展开.RAII 异常机制与构造函数 异常机制与析构函数 noexcept修饰符与noexcept操作符 异常处理的性能 ...

  6. 深入js系列-类型(数字)

    开头 js数字没有明确区分浮点数和整数类型,统一用number类型表示. number 基于IEEE 754标准实现 js采用的是双精度(64位二进制) 我们看一个基于IEEE 754标准实现都有会有 ...

  7. code 1716

    # import_company def test_import_company(self): headers=self.headers headers["Content-Type" ...

  8. ubuntu容器化开发系统配置 相关下载地址(laravel)

    ubuntu64位 18.04(开发使用桌面版本) Nginx PHP7.3 开发工具:PHPStorm 其他技术栈:laravel.VUE.NodeJs https://laravel.com/ h ...

  9. Glimma 包

    http://master.bioconductor.org/packages/3.9/bioc/html/Glimma.html 安装 if (!requireNamespace("Bio ...

  10. Docker整合dockerfly实现UI界面管理(单机版)

    一.搜索镜像 docker search dockerfly 二.根据镜像使用排名(一般情况下拉取使用率最高的镜像名),我这里使用的是阿里云镜像地址 docker pull registry.cn-h ...