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

拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改.

drag and drop事件流程

一个完整的drag and drop流程通常包含以下几个步骤:

设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽.
监听dragstart设置拖拽数据
为拖拽操作设置反馈图标(可选)
设置允许的拖放效果,如copy,@H_797_16@move,link
设置拖放目标,默认情况下浏览器阻止所有的拖放操作,所以需要监听dragenter或者dragover取消浏览器默认行为使元素可拖放.
监听drop事件执行所需操作

拖拽事件

以下是拖拽产生的一系列事件,拖拽事件产生时不会产生对应的鼠标事件.

@H_197_60@

dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.

dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮

dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.

dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.

drag:拖拽期间在被拖拽元素上连续触发

drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.

dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.

DataTransfer对象

拖拽事件周期中会初始化一个DataTransfer对象,用于保存拖拽数据和交互信息.以下是它的属性和方法.

@H_197_60@

dropEffect: 拖拽交互类型,通常决定浏览器如何显示鼠标光标并控制拖放操作.常见的取值有copy,link和none

effectAllowed: 指定允许的交互类型,可以取值:copy,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','@R_696_11423@lo World');
},falsE);

实际案例

前面介绍了最基本的理论知识,下面进行实际操作

元素拖拽

目标: 拖拽元素到达目的区域,改变在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 -->