知识点（鼠标跟随）：

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放到这个容器中后，这个图片就到了这个指定得文件夹中。

巴特西

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

知识点（鼠标跟随）：

知识点（鼠标拖拽）

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

实例2(文件拖拽上传)

最新文章

热门文章