美文网首页
HTML5 拖拽事件

HTML5 拖拽事件

作者: Do_Du | 来源:发表于2020-03-31 16:05 被阅读0次

    HTML5 拖拽事件
    图片自带拖拽功能
    其他元素也通过设置 draggable=true属性 实现拖拽功能

    <div id="right" draggable="true">垃圾(拖拽的元素)</div>

    拖拽元素事件分为两类

    • 被拖拽元素触发的事件
    • 拖放目标元素触发的事件

    被拖拽元素事件:

    1. ondragstart: 开始拖拽事件 - 开始点击鼠标事件
    2. ondrag:拖拽过程;拖拽前、拖拽结束之间,连续触发
    3. ondragend: 结束拖拽事件 - 释放鼠标事件

    拖放目标元素事件:

    1. ondragenter: 进入目标元素触发,鼠标光标进入
    2. ondragover:进入目标。离开目标之间,连续触发
      【默认情况下,一个元素不能放另一个元素的上面,需要在ondragover事件里阻止默认事件】
    3. ondragleave: 离开目标元素触发
    4. ondrop:在目标元素上释放鼠标触发
      【默认情况下,一个元素不能放另一个元素的上面,需要在drop事件里阻止默认事件】

    案例:模仿拖动文件至回收站的情景
    开始:


    image.png

    结果:


    image.png
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <style>
      #left{
        float: left;
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
        text-align: center;
        line-height: 200px;
        color: #fff;
        cursor: move;
      }
      #right {
        float: right;
        width: 100px;
        height: 100px;
        background: green;
        text-align: center;
        line-height: 100px;
        color: #fff;
        cursor: move;
      }
    </style>
    <body>
      <div id="left">垃圾桶(目标元素)</div>
      <div id="right" draggable="true">垃圾(拖拽的元素)</div>
      <script>
        window.onload = function () {
          var left = document.getElementById('left');
          var right = document.getElementById('right');
    
          // 拖拽元素事件
    
          right.ondragstart = function () { // ondragstart 开始拖拽事件 - 开始点击鼠标事件
            this.innerHTML = '拖拽中...'
          }
    
          right.ondrag = function () { // ondrag 拖拽过程
            console.log('nnn')
          }
    
          right.ondragend = function () { // ondragend 结束拖拽事件 - 释放鼠标事件
            this.innerHTML = '垃圾(拖拽的元素)'
          }
    
          //目标元素事件
    
          left.ondragenter = function () { // 进入目标元素触发,鼠标光标进入
            this.innerHTML = '进入目标元素触发'
          }
    
          left.ondragover = function (e) { // 进入目标。离开目标之间,连续触发 【默认情况下,一个元素不能放另一个元素的上面,需要在ondragover事件里阻止默认事件】
            var e = event || window.event
            e.preventDefault();
            console.log('进入目标。离开目标之间')
          }
    
          left.ondragleave = function () { // 离开目标元素触发
            this.innerHTML = '离开目标元素触发';
          }
    
          left.ondrop = function (e) { // 在目标元素上释放鼠标触发 【默认情况下,一个元素不能放另一个元素的上面,需要在drop事件里阻止默认事件】
            var e = event || window.event
            document.body.removeChild(right)
            e.preventDefault();
          }
        }
      </script>
    </body>
    </html>
    

    兼容火狐浏览器

    数据交换:e.dataTransfer 属性setData、getData

    案例:


    image.png
    image.png
    image.png
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <style>
      #left{
        float: left;
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
        text-align: center;
        line-height: 200px;
        color: #fff;
        cursor: move;
      }
      #right {
        float: right;
        width: 100px;
        height: 232px;
        background: green;
        text-align: center;
        line-height: 100px;
        color: #fff;
        cursor: move;
      }
      #right p{
        line-height: 30px;
        border-bottom: 1px solid pink;
      }
    </style>
    <body>
      <div id="left">垃圾桶(目标元素)</div>
      <div id="right">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
      </div>
      <script>
        window.onload = function () {
          var left = document.getElementById('left');
          var right = document.getElementById('right');
    
          var ap = document.querySelectorAll('p');
    
          for (var i=0; i < ap.length; i++) {
    
            ap[i].draggable = true; 
    
            ap[i].index = i;
    
            ap[i].ondragstart = function (event) { // 兼容火狐写法
              var e = event || event.target;
    
              console.log('e.dataTransfer', e.dataTransfer)
              e.dataTransfer.setData('key',this.index)
            }
          }
    
          left.ondragover = function (event) {
            var e = event || event.target;
            e.preventDefault();
    
          }
    
          left.ondrop = function (event) {
            var e = event || event.target;
            right.removeChild(ap[ e.dataTransfer.getData('key')])
          }
        }
      </script>
    </body>
    </html>
    

    模仿百度拖拽图片

    image.png
    image.png
    image.png
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <style>
      #box {
        width: 400px;
        height: 200px;
        background: pink;
        line-height: 200px;
        text-align: center;
        margin: 100px auto;
      }
      li{
        float: left;
        border: 1px solid pink;
        list-style: none;
      }
    </style>
    <body>
      <div id="box">把图片拖拽至此区域</div>
      <ul id="list"></ul>
      <script>
        window.onload = function () {
         var box = document.getElementById('box');
         var list = document.getElementById('list');
         
         box.ondragenter = function () { 
           this.innerHTML = '请释放你的鼠标';
         } 
    
         box.ondragover = function (event) {
          var e = event || event.target;
           e.preventDefault();
         }
    
         box.ondragleave = function () {
           this.innerHTML = '把图片拖拽至此区域';
         }
    
         box.ondrop = function (event) {
           var e = event || event.target;
    
           var file = e.dataTransfer.files;
    
           var str = '';
           
           for (var i=0; i< file.length; i++) {
            // window.URL.createObjectURL在浏览器上预览本地图片或者视频
             var url = window.URL.createObjectURL(file[i]); 
             str +='<li><img width="150" src="'+url+'" /></li>'
           }
           list.innerHTML +=str;
           
           console.log(e.dataTransfer)
           console.log(file)
    
           e.preventDefault();
           e.stopPropagation();
         }
        }
      </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:HTML5 拖拽事件

          本文链接:https://www.haomeiwen.com/subject/vfgwuhtx.html