zoukankan      html  css  js  c++  java
  • HTML5深入学习之鼠标跟随,拖拽事件

    知识点(鼠标跟随):

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

  • 相关阅读:
    django_开发报错
    SpringBoot 前后端数据参数交互
    消息队列学习笔记(一)
    2021年调用工商二维码退款查询接口
    2021年调用工商二维码退款接口
    2021年调用工商二维码生成接口及回调接口demo
    调用工商生成二维码接口文档的坑
    使用hutool工具类转换时间
    微信模板消息推送
    pom文件 spring-boot-maven-plugin 爆红
  • 原文地址:https://www.cnblogs.com/duxiu-fang/p/11107672.html
Copyright © 2011-2022 走看看