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" 。

 

 

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

 

 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

< div  id = "et" >拖动委托层</ div > < div  id = "drag"  draggable = "true" >     被拖动 </ div > < div  class = "asd"  id = "zone" >     拖动区域< br >  </ 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， 需加如下代码：

 

?

1 2 3 4 5

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

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

 

?

1 2 3

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

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

 

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