原生拖拽,拖放事件(drag and drop)

原生拖拽,拖放事件(drag and drop)

拖拽,拖放事件能夠經過拖拽實現數據傳遞,達到良好的交互效果,如:從操做系統拖拽文件實現文件選擇,拖拽實現元素佈局的修改.

drag and drop事件流程

一個完整的drag and drop流程一般包含如下幾個步驟:

1. 設置可拖拽目標.設置屬性draggable="true"實現元素的可拖拽.
2. 監聽dragstart設置拖拽數據
3. 爲拖拽操做設置反饋圖標(可選)
4. 設置容許的拖放效果,如copy,move,link
5. 設置拖放目標,默認狀況下瀏覽器阻止全部的拖放操做,因此須要監聽dragenter或者dragover取消瀏覽器默認行爲使元素可拖放.
6. 監聽drop事件執行所需操做

拖拽事件

如下是拖拽產生的一系列事件,拖拽事件產生時不會產生對應的鼠標事件.

• dragstart:拖拽開始時在被拖拽元素上觸發此事件,監聽器須要設置拖拽所需數據,從操做系統拖拽文件到瀏覽器時不觸發此事件.
• dragenter:拖拽鼠標進入元素時在該元素上觸發,用於給拖放元素設置視覺反饋,如高亮
• dragover:拖拽時鼠標在目標元素上移動時觸發.監聽器經過阻止瀏覽器默認行爲設置元素爲可拖放元素.
• dragleave:拖拽時鼠標移出目標元素時在目標元素上觸發.此時監聽器能夠取消掉前面設置的視覺效果.
• drag:拖拽期間在被拖拽元素上連續觸發
• drop:鼠標在拖放目標上釋放時,在拖放目標上觸發.此時監聽器須要收集數據而且執行所需操做.若是是從操做系統拖放文件到瀏覽器,須要取消瀏覽器默認行爲.
• dragend:鼠標在拖放目標上釋放時,在拖拽元素上觸發.將元素從瀏覽器拖放到操做系統時不會觸發此事件.

DataTransfer對象

拖拽事件週期中會初始化一個DataTransfer對象,用於保存拖拽數據和交互信息.如下是它的屬性和方法.

• dropEffect: 拖拽交互類型,一般決定瀏覽器如何顯示鼠標光標並控制拖放操做.常見的取值有copy,move,link和none
• effectAllowed: 指定容許的交互類型,能夠取值:copy,move,link,copyLink,copyMove,limkMove, all, none默認爲uninitialized(容許全部操做)
• files: 包含File對象的FileList對象.從操做系統向瀏覽器拖放文件時有用.
• types: 保存DataTransfer對象中設置的全部數據類型.
• setData(format, data): 以鍵值對設置數據,format一般爲數據格式,如text,text/html
• getData(format): 獲取設置的對應格式數據,format與setData()中一致
• clearData(format): 清除指定格式的數據
• setDragImage(imgElement, x, y): 設置自定義圖標

dataTransfer對象在傳遞給監聽器的事件對象中能夠訪問,以下:

draggableElement.addEventListener('dragstart', function (event) {
  event.dataTransfer.setData('text', 'Hello World');
}, false);

推薦的拖拽元素和數據類型

詳細參考MDN recommended drag type

文本

在頁面中選擇文本並拖拽,無需處理dragstart設置數據,瀏覽器自動設置選取的文本.至關於event.dataTransfer.setData("text/plain", "this is text to drag").只須要在拖放目標上讀取對應格式的數據便可.

連接

實際案例

前面介紹了最基本的理論知識,下面進行實際操做

元素拖拽

目標: 拖拽元素到達目的區域,改變在DOM中的位置,同時設置反饋視覺效果在線demo

<div id="demo1">
  <ul class="panel-list">
    <li class="panel-item"></li>
    <li class="panel-item"></li>
    <li class="panel-item"></li>
    <li class="panel-item"></li>
    <li class="panel-item"></li>
  </ul>
  <h2>拖拽下面的方塊到上面任意容器中</h2>

  <!-- 設置draggable使元素成爲可拖拽元素 -->
  <span class="movable" id="demo1-src" draggable="true"></span>

  <style>
  #demo1 {
    margin: 20px;
  }
  #demo1 .panel-list {
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #demo1 .panel-item {
    float: left;
    margin-right: 30px;
    width: 100px;
    height: 100px;
    background: #ddd;
    border: 1px solid #ddd;
  }
  #demo1-src {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: purple;
  }
  #demo1 .over {
    border: 1px dashed #000;
    -webkit-transform: scale(0.8, 0.8);
  }
  </style>
  <script>
  (function () {

    var dnd = {
      // 初始化
      init: function () {
        var me = this;
        me.src = document.querySelector('#demo1-src');
        me.panelList = document.querySelector('.panel-list');

        // 爲拖拽源監聽dragstart,設置關聯數據
        me.src.addEventListener('dragstart', me.onDragStart, false);

        // 拖拽鼠標移入元素,在拖放目標上設置視覺反饋
        me.panelList.addEventListener('dragenter', me.onDragEnter, false);

        // 取消元素dragover默認行爲,使其可拖放
        me.panelList.addEventListener('dragover', me.onDragOver, false);

        // 拖拽移出元素,清除視覺反饋
        me.panelList.addEventListener('dragleave', me.onDragLeave, false);

        // 鼠標釋放,在拖放目標上接收數據並處理
        me.panelList.addEventListener('drop', me.onDrop, false);
      },
      onDragStart: function (e) {
        e.dataTransfer.setData('text/plain', 'demo1-src');
      },
      onDragEnter: function (e) {
        if (e.target.classList.contains('panel-item')) {
          e.target.classList.add('over');
        }
      },
      onDragLeave: function (e) {
        if (e.target.classList.contains('panel-item')) {
          e.target.classList.remove('over');
        }
      },
      onDragOver: function (e) {
        e.preventDefault();
      },
      onDrop: function (e) {
        var id = e.dataTransfer.getData('text/plain');
        var src = document.getElementById(id);
        var target = e.target;
        if (target.classList.contains('panel-item')) {
          target.appendChild(src);
          target.classList.remove('over');
        }
      }

    };

    dnd.init();
  }());
  </script>
</div>

從操做系統拖拽圖片到指定區域進行預覽

從操做系統拖拽文件到瀏覽器中.不會觸發dragstart,dragend,只需取消拖放區域的默認行爲,設置反饋,並在拖放發生時取消瀏覽器默認行爲,經過e.dataTransfer.files獲取文件信息進行操做.在線demo

<div id="demo2">
  <h3>從文件夾中拖拽圖片到下面的區域進行預覽</h3>
  <ul class="preview"></ul>
  <style>
  #demo2 {
    margin: 20px;
  }
  #demo2 .preview {
    height: 300px;
    background: #ddd;
  }
  #demo2 li {
    float: left;
    margin-left: 40px;
  }
  #demo2 img {
    max-height: 150px;
    width: auto;
  }
  </style>

  <script>
  (function (w) {
    var doc = w.document;

    var dnd = {
      init: function () {
        var me = this;
        var preview = doc.querySelector('#demo2 .preview');

        preview.addEventListener('dragover', function (e) {
          e.preventDefault();
        }, false);

        preview.addEventListener('drop', function (e) {
          // 操做系統拖放文件到瀏覽器須要取消默認行爲
          e.preventDefault();

          [].forEach.call(e.dataTransfer.files, function (file) {
            if (file && file.type.match('image.*')) {
              var reader = new FileReader();

              reader.onload = function (e) {
                var img = doc.createElement('img');
                img.src = e.target.result;
                var li = doc.createElement('li');
                li.appendChild(img);
                preview.appendChild(li);
              };

              reader.readAsDataURL(file);
            }
          });
        }, false);
      }

    };

    dnd.init();
  }(window));
  </script>
</div> <!-- demo2 -->

參考資料

• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_and_drop
• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operation...
• http://blog.teamtreehouse.com/implementing-native-drag-and-drop
• http://www.html5rocks.com/en/tutorials/dnd/basics/