(十) 模拟 HTML5 实现 DragDrop

DragDrop 看似简单，实现起来却不大容易。 HTML5 已经提供了用于支持 DragDrop 的事件。使用这些事件可以方便实现 dragdrop。介于有些朋友对 HTML5 的 dragdrop 不熟，在这里先介绍下标准的 dragdrop 。

dragdrop 不是新物，早在 IE4 就有了。但那时只是 IE 的独家技能，所以标准浏览器不支持此事件，现在 HTML5 采用了 IE 的方法，故目前最新版浏览器都支持 DragDrop 。

DragDrop 是 Drag （拖动） Drop（放下）两个操作。

为实现 Drag ，需要知道以下的事件：

dragstart - 拖动开始事件
drag - 拖动时，这个事件不断出现
dragend - 拖动结束事件

为实现 Drop，需要知道以下的事件：

dragenter - 拖到当前区事件
dragover - 拖到当前区时，不断出现
dragleave - 拖出事件
drop - 在当前区停下事件

假如拖动一个元素到另一个元素，发生事件的顺序为：

dragstart - drag （不断） - [ dragenter - dragover/drag （交替） - dragleave/drop - ] dragend

拖动事件的参数 e，有个成员 dataTransfer ，表示当前拖动的数据。

默认下， img 和 a 标签可拖到。如果需要其它节点也支持拖动，必须指明 draggable="true" 。

根据上文，你肯能会写这样的代码：

  <div id="et">拖动委托层</div>
  <div id="drag" draggable="true">
     被拖动
  </div>
  <div class="asd" id="zone">
     拖动区域
  </div>
  <script>
     $('drag').on('dragstart', function(e){
          console.log(e.type);
     }).on('drag',  function(e){
         console.log(e.type);
     }).on('dragend',  function(e){
         console.log(e.type);
     });
   </script>

但这个代码只能在 Chrome 正常执行。

对于 IE，则需要先选择字，然后拖。

对于 Safari，需加如下代码：

    <style>
           [draggable = true] {
                -khtml-user-drag: element;
            }
    </style>

对于 Firefox，除了加上面的代码，还需加

function dragstart(e){
   e.dataTransfer.setData('Text', this.id);  // 火狐必须加这句
}

目前，各浏览器对 DragDrop 的支持不同。老浏览器也不支持 DragDrop 。

所以，必须找一个和谐的办法。

我的目标是模拟浏览器的 dragdrop，让它和浏览器原生的一样。

先调用一个函数：

$('d1').setDraggable(true); // 设置可拖动

然后这个对象便能拖动，如果还要设置事件，可以：

$('drag').on('dragstart', function(e){
          console.log(e.type);
     }).on('drag',  function(e){
          console.log(e.type);
     }).on('dragend',  function(e){
          console.log(e.type);
    });

对于目标元素，同样可设置事件，处理拖到当前元素时的处理

$('zone1').on('dragenter', function(e){ trace("dragenter"); return false; }).on('dragover', function(e){ trace("dragover"); return false; }).on('dragleave', function(e){ trace("dragleave"); return false; }).on('drop', function(e){ trace("drop"); });

下面介绍如何实现：

对于 Drag ，需要用 mouse 事件模拟。

先写3个函数：分别处理 mousedown， mousemove， mouseup ，这个相对简单，不多废话。

function mousedown(e ){
   
     // 左键才继续
     if(e.which != 1)
         return;

     // 初始化位置。

     // 暂时保存导致事件发生的目标。
     Drag.target = this;

     // 手动触发  dragstart
    this.trigger('dragstart', e);
    
    document.on('mouseup', mouseup).on('mousemove', mousemove);
}

function mouseup(e ){
   
   // 左键才继续
  if(e.which != 1)
      return;

    // 手动触发  dragend
    this.trigger('dragend', e);

   // 通知已发生 Drop 事件。
    Drag.onDrop(e);

    document.un('mousemove', mousemove).un('mouseup', mouseup);
}


function mousemove(e )

    // 手动触发  drag
    this.trigger('drag', e);

     // 移动目标。
}

然后是实现 Drop，一个 element 拖动时如何正确判断当前到上面元素，并触发那个元素的 drop 事件?

方案甲：

判断目标区域 Zone 是否发生 mouseenter 事件，在 mouseenter 事件处理是否在拖动，如果同时发生 mouseenter 和 drag ，则发生 dragenter 。

方案乙：

在拖动时不断计算目标位置的坐标（Bound）和当前元素，如果进入则发生 dragenter 。

因此，先写一个函数判断是否在目标内：

function isEnter(bound, box){
     return ((bound.right < box.right && bound.right > box.left) || (bound.left < box.right && bound.left > box.left)) &&
					  ((bound.bottom < box.bottom && bound.bottom > box.top) || (bound.top < box.bottom && bound.top > box.top)) ;
}

然后在 drag 中，检查当前的 bound 和目标是否符合要求，如果符合要求，继续判断：

function raiseEvent(e){
  if(isEnter(bound, box)){

   // 如果上次的区域和当前区域一样，表示在同区发生拖动， 应发生 dragover
    if( Drap.zone == zone)  {
        zone.trigger('dragover', e);
   } else {

       // 如果上次在一个zone，现在没有，表示离开一个 zone
      if(Drap.zone) Drap.zone.trigger('dragleave', e);

      Drap.zone = zone;  // 保存当前的 zone

     zone.trigger('dragenter', e);
     return;

  } 

}

   // 现在没有激活的区，但上次有，说明已经拖到上次的外面
  if(Drap.zone){
     Drap.zone.trigger('dragleave', e);
     Drap.zone = null;
    }

}

这样稍微加工，就可以完成 DragDrop 。

具体源码在以后一起发。

XULD QQ 744257564