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="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="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="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进行数据交换，有空一定将此补上~~

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