關於前端上傳文件全面基礎掃盲貼(五) ----- H5拖拽事件

時間 2020-01-17

標籤關於前端上傳文件全面基礎掃盲 h5 事件简体版

原文原文鏈接

系列文章

關於前端上傳文件全面基礎掃盲貼(零)
關於前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest
關於前端上傳文件全面基礎掃盲貼(二) ----- File
關於前端上傳文件全面基礎掃盲貼(三) ----- FormData
關於前端上傳文件全面基礎掃盲貼(四) ----- FileReader
關於前端上傳文件全面基礎掃盲貼(五) ----- H5拖拽事件
 關於前端上傳文件全面基礎掃盲貼(六) ----- 圖片上傳,旋轉,重繪,預覽等實戰(附DEMO)javascript

H5拖拽事件(知識點主要來源於HTML 5 拖放)

其實打算出實戰代碼的，想一想好像能夠插多一個拖曳掃盲貼，在PC上傳文件也常常能用到的，先來看看有關知識點。
在 HTML5 中，拖放是標準的一部分，任何元素都可以拖放。先看看兼容性如何

移動端全線飄紅我能夠理解的，畢竟不是主要應用交互，css

首先，爲了使元素可拖動，把 draggable 屬性設置爲 true ：<p draggable="true" >元素哦</p>。
裏面的事件有html

事件	描述
ondragstart	當拖拽元素開始被拖拽的時候觸發的事件，此事件做用在被拖曳元素上
ondragenter	當拖曳元素進入目標元素的時候觸發的事件，此事件做用在目標元素上
ondragover	拖拽元素在目標元素上移動的時候觸發的事件，此事件做用在目標元素上（默認地，沒法將數據/元素放置到其餘元素中。若是須要設置容許放置，咱們必須阻止對元素的默認處理方式 event.preventDefault() 方法。）
ondrop	被拖拽的元素在目標元素上同時鼠標放開觸發的事件，此事件做用在目標元素上
ondragend	當拖拽完成後觸發的事件，此事件做用在被拖曳元素上

方法有前端

方法	做用
setData	設置被拖元素的數據類型和值
getData	返回在 setData() 方法中設置爲相同類型的任何數據

實例：html5

<!DOCTYPE HTML>
<html>

  <head>
    <style type="text/css">
      #div1,
      #div2 {
        width: 200px;
        height: 100px;
        margin: 10px;
        padding: 10px;
        border: 1px solid #aaaaaa;
      }
      #drag {
        width: 200px;
        height: 100px;
        background: red;
      }
    </style>
  </head>

  <body>

    <div id="div1" ondragenter="dragenter(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
      <div id="drag" draggable="true"></div>
    </div>
    <div id="div2" ondragenter="dragenter(event)" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br/>
    <p id='text1'></p>
    <p id='text2'></p>

    <script type="text/javascript">
      var text1 = document.querySelector('#text1'),
        text2 = document.querySelector('#text2'),
        drag = document.querySelector('#drag'),
        div1 = document.querySelector('#div1'),
        div2 = document.querySelector('#div2');

      drag.ondragstart = function (ev) {
        text1.innerHTML = '拖拽元素開始被拖拽';
        text2.innerHTML = '';
        ev
          .dataTransfer
          .setData("Text", ev.target.id);
      };

      drag.ondragend = function (ev) {
        text1.innerHTML = '拖拽完成';
      };

      function allowDrop(ev) {
        ev.preventDefault();
      }

      function dragenter(ev) {
        text2.innerHTML = '拖曳元素進入目標元素';
      }

      function drop(ev) {
        ev.preventDefault();
        var data = ev
          .dataTransfer
          .getData("Text");
        ev
          .target
          .appendChild(document.getElementById(data));
        text2.innerHTML = '被拖拽的元素在目標元素上同時鼠標放開';
      }
    </script>

  </body>

</html>

就講這麼多了，接下來大家能夠本身發揮想象作出好多好玩的東西了。java