HTML5 原生拖放

前言：

　HTML5提供专门的拖拽与拖放的API,可以方便的指定某个元素可拖动，可以创建自定义的可拖动元素和放置目标

相关知识点：

　1.拖放事件

　　　　拖放元素时，将依次触发下列事件

• • dragstart  按下鼠标并开始移动鼠标时，在被拖放元素上触发
  • drag　　　元素被拖动期间持续触发
  • dragend   拖动停止时触发

　　　　当元素被拖动到一个有效放置目标时，下列事件依次发生

• • dragenter 只要有元素被拖放到放置目标上时触发
  • dragover   被拖放元素在放置目标范围内移动时，持续触发
  • drop或dragleave 元素被拖放到放置目标中，触发drop事件；元素被拖出放置目标时，触发dragleave事件
    

　2.自定义放置目标

　　假设有一个ID为‘droptarget’的<div>元素，利用一下代码可以将它变为一个放置目标

  var droptarget=$("#droptarget")

  droptarget.bind("dragover",function (event) {
    event.preventDefault();
  })
  droptarget.bind("dragenter",function (event) {
    event.preventDefault();
  })
  droptarget.bind("drop",function (event) {
    event.preventDefault();
  })

以上代码执行后，当拖放元素移动到放置目标上时，光标会变成允许放置的符号，释放鼠标就会触发drop事件

注意：在FireFox3.5+中，放置事件的默认行为是打开被放到放置目标的url，也就是说，将图片拖放到放置目标的时，页面会转向图像文件，而如果将文本放到当放置目标的时候，会因为无效URL而导致错误。因此，为了FireFox正常拖放，还要取消drop事件默认行为，阻止它打开URL

　3.dataTransfer 对象：拖放操作实现数据交换的媒介，使用一般为Event.dataTransfer。

主要有两种方法：getData()和setData(),HTML5为此甲加以扩展，允许指定各种MIME类型，考虑跨流浪器问题，我们可以这样子使用：

 var dataTransfer=event.dataTransfer;
 // 读取URL
3 var url=dataTransfer.getData('url')||dataTransfer.getData('text/uri-list');
4 //读取文本
5 var text=dataTransfer.getData('Text')

　　注意：在Firefox中，clearData()和setData()方法只能在ondragstart事件处理程序中调用。在其他情况下使用clearData()和setData()方法都会引发异常。

一定要将短数据放在前面，因为在IE10及之前版本不支持MIME类型名，会抛出错误；FireFox5.0版本之前不能正确将“text”类型映射为‘text/plain’，却可以将“Text”(注意大写)类型映射为‘text/plain’

　4.dataEffect和effecAllowed

实例：

为了更方便理解，实现了一个简单的demo

demo源代码地址：戳 here

源代码：

html代码：

     <div class="container">
         <div class="favbox" id='droptarget'>
             <p style='margin:1px;font-size: 0.8rem;'>收集箱</p>
           <span><i class="fa fa-heart"></i>&nbsp;(<span id='favnum'>0</span>)</span>
         </div>
         <div class="gallery">
             <a href="images/image-1.jpg" class="image-link dragitem" draggable="true" data-lightbox="roadtrip" title="点击查看大图"> <img src="data:images/image-1.jpg" alt="" class="img-thumbnail img-fluid"></a>
             <a href="images/image-2.jpg" class="image-link dragitem" draggable="true" data-lightbox="roadtrip" title="点击查看大图"> <img src="data:images/image-2.jpg" alt="" class="img-thumbnail img-fluid"></a>
             <a href="images/image-3.jpg" class="image-link dragitem" draggable="true" data-lightbox="roadtrip" title="点击查看大图"> <img src="data:images/image-3.jpg" alt="" class="img-thumbnail img-fluid"></a>
         </div>
     </div>

js代码：

  $(function () {
    new DragUtil('.dragitem', '#droptarget')
  });

  var DragUtil = function (dragList, dropEle) {
      /* 拖拽对象  */
    this.$draglist = $(dragList)
      /* 放置目标 */
    this.$droptarget = $(dropEle)
    this.$dragEle = null;

    this.$draglist.each(function (index, item) {
      item.ondragstart = function (e) {
        /*拖拽开始*/
        e.dataTransfer.effectAllowed = "move";
        if (e.target.nodeName === 'A') {
          this.$dragEle = $(e.target)
        } else {
          this.$dragEle = $(e.target)
            .parents('a')[0]
        }
        e.dataTransfer.setData("url", this.$dragEle);
        return true;
      };
      $(item)
        .bind('dragend', function (e) {
          /*拖拽结束*/

          this.$dragEle.remove()
          return false
        });
    })

    this.$droptarget.bind("dragover", function (event) {
      /*拖拽元素在放置目标上移动的时候*/
      event.preventDefault();
      return true;
    })
    this.$droptarget.bind("dragenter", function (event) {
      /*拖拽元素在放置目标上的时候*/
      this.style.color = "red";
      return true;
    })
    this.$droptarget.bind("drop", function (e) {
      /*拖拽元素放置到放置目标，取消默认行为！*/
      e.preventDefault();
      var dataTransfer = e.originalEvent.dataTransfer
      var imgUrl = dataTransfer.getData('url') || dataTransfer.getData(
        'text/uri-list')
      $(this)
        .append('<img src="' + imgUrl + '">')
      var favnum = $('#favnum')
        .html();
      favnum++;
      $("#favnum")
        .html(favnum)
      this.style.color = "#666";
      return true;
    })
  }

结束语：

根据自己的简单的测试，demo在chrome，FireFox，IE均可实现，文中注意点是比较重要的部分，故重点高亮了，然而在FireFox，虽然不报错，但暂时还不能正确地利用dataTransfer进行数据交换，有空一定将此补上~~

感谢阅读。文中要是有表述不准确的地方，欢迎指正。