HTML5深入学习之鼠标跟随，拖拽事件

知识点（鼠标跟随）：

mousedown: 当用户用鼠标点击在某一元素上就会触发该事件
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>

知识点（鼠标拖拽）

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

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

dragenter: 当被拖拽的元素对象进入其容器范围内时触发该事件
dragover: 当被拖拽的元素对象在其容器范围内拖拽时触发该事件
dragleave: 当被拖拽的元素对象离开其容器范围内触发该事件
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放到这个容器中后，这个图片就到了这个指定得文件夹中。