知识点（鼠标跟随）：

  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. Sonarqube C#静态代码规范检查（一）

    使用说明 代码规范对于每个开发来说重要也重要,说不重要其实也没那么重要,简单点的vs的code analysis也能提供很多的建议,重量级一点的Resharper不仅能提供建议,还提供了更方便快捷的一 ...

  2. python基础之三：int、bool、str

    一.数据类型之整型的函数使用 i = print("该整型数字所占有效比特位的长度是:%d" % i.bit_length()) print(i.to_bytes(, " ...

  3. DFS_BFS（深度优先搜索 和 广度优先搜索）

    package com.rao.graph; import java.util.LinkedList; /** * @author Srao * @className BFS_DFS * @date ...

  4. 列表：list

    #_*_coding:utf-8_*_#作者:王佃元#日期:2019/12/7'''数据类型整数字符串列表.元组name = 'wuchao'name = 'jinxin'name = 'xiaohu ...

  5. bfc与浮动元素的关系

    首先说明两个特性: 1,浮动元素兄弟元素的布局规则 当html中存在浮动元素时,其兄弟元素的布局遵循如下规则: (1)块级元素的渲染无视浮动元素 (2)文本内容或者是行内元素的渲染会考虑到浮动元素的存 ...

  6. 【Gamma】“北航社团帮”测试报告——小程序v3.0

    目录 测试计划.过程和结果 后端测试--单元测试与覆盖率 后端测试--压力测试 展示部分数据 平均数据 前端测试--小程序v3.0 新功能 各页面均可正常打开,跳转,回退 授权登录与权限检查 页面数据 ...

  7. @RequestMapping 用法详解

    简介: @RequestMapping RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径. RequestM ...

  8. [原创]UnLua Emmylua UE4开发环境搭建

    前言 公司开发的第二个虚幻4项目已经上线了,慢慢趋于稳定.回想起开荒的日子,历历在目.从引擎脚本的选择,各工具(导表,协议生成...)的重构.开发, 引擎扩展(多骨骼支持,Notify扩展,技能编辑器 ...

  9. Python【每日一问】18

    问: [基础题]:请解释新式类跟经典类,并说明它们的区别[提高题]:请解释Python垃圾回收机制 答: [基础题]:请解释新式类跟经典类,并说明它们的区别 1.新式类都是继承内置 object 对象 ...

  10. C的位运算符

    1.前言 C的位运算符有&(按位与).|(按位或).^(按位异或).~(按位取反),位运算符把运算对象看作是由二进制位组成的位串信息,按位完成指定的运算,得到相应的结果. 2.位运算符 在上面 ...