原生 drag drop HTML5

Posted 2020-06-09

drag事件（ dragstart -- drag -- dragend ）

 

当按下鼠标开始drag一个可以拖动的对象时，触发dragstart事件，如果元素是不可拖动的话，会出现一个不可拖动的图标，圆环里面一条斜杠

 

dragstart事件触发以后，当你拖动元素，就会持续触发drag事件，直到你放开才触发dragend事件

 

放下（dragenter -- dragover -- dragleave/drop）

当拖动的元素进入一个有效的drop区域，就会马上触发dragenter事件，当拖着元素在有效drop区域内移动时，会一直触发dragover事件，如果最后把元素拖出去了那就触发dragleave，如果最后把元素放下了那就触发drop事件。

 

定制drop目标区域

所有元素可以设置为drop目标，默认是不允许drop的，只要禁止dragenter和dragover事件默认行为就可以设置该元素为drop target区域

<div id="target"></div>

var droptarget = document.getElementById(“droptarget”);

EventUtil.addHandler(target, “dragover”, function(event){

    EventUtil.preventDefault(event);

});

EventUtil.addHandler(target, “dragenter”, function(event){

    EventUtil.preventDefault(event);

});

 

Firefox3.5+的默认行为是转到被拖动元素的URL，就是如果拖动一张图片，那么结构就是转到转到图片URL去。需要禁止掉drop事件的默认行为：

EventUtil.addHandler(droptarget, “drop”, function(event){

     EventUtil.preventDefault(event);

});

 

传输数据（dataTransfer对象）：

当你开始drag的时候，数据就会被保存到dataTransfer里，例如拖动一段文字，那么就会调用setData方法把文字以text格式保存下来，拖动图片则会以URL的格式保存数据。

event.dataTransfer.setData(“text”, “some text”);                           //working with text
var text = event.dataTransfer.getData(“text”);

event.dataTransfer.setData(“URL”, “http://www.wrox.com/”);          //working with a URL（image）
var url = event.dataTransfer.getData(“URL”);

这是ie开始允许两种类型，后来html5扩展了，允许所有MIME类型，dataTransfer的数据只有在drop事件里才能拿到，如果不拿该对象就会销毁

（兼容性：

var dataTransfer = event.dataTransfer;

var url = dataTransfer.getData(“url”) ||dataTransfer.getData(“text/uri-list”);    //直到ie10都不支持拓展名，所以把URL放前面，后面text/uri-list是支持Firefox

var text = dataTransfer.getData(“Text”);

）

 

dataTransfer可以控制对被拖动元素和drop目标采取怎样的行动：

对于drop目标元素设置dragenter事件，对event.dataTransfer.dropEffect设定值，可以改变拖进去时鼠标上的图标而已：

“none”— A dragged item cannot be dropped here. This is the default value for everything except text boxes.

“move”— The dragged item should be moved to the drop target.

“copy”— The dragged item should be copied to the drop target.

“link”— Indicates that the drop target will navigate to the dragged item (but only if it is a URL).

同时需要在dragstart配合设置  event.dataTransfer.effectAllowed，该属性规定了对于被拖动的元素哪个drop效果是允许的：

“uninitialized”— No action has been set for the dragged item.

“none”— No action is allowed on the dragged item.

“copy”— Only dropEffect “copy”is allowed.

“link”— Only dropEffect “link”is allowed.

“move”— Only dropEffect “move”is allowed.

“copyLink”— dropEffect “copy”and “link”are allowed.

“copyMove”— dropEffect “copy”and “move”are allowed.

“linkMove”— dropEffect “link”and “move”are allowed.

“all”— All dropEffectvalues are allowed.

 

dataTransfer对象还有一些方法：

clearData(format)  用来清除掉特定格式的数据

setDragImage(element, x, y)     定制拖动时鼠标下的图标

 

设置元素可drag：

默认图片，连接，文字是可drag的，HTML5提供了一个draggable属性

<!-- turn off dragging for this image -->

<img src=”smile.gif” draggable=”false” alt=”Smiley face”>

<!-- turn on dragging for this element -->

<div draggable=”true”>...</div>

（兼容性：Internet Explorer 9 and earlier allow you to make any element draggable by calling the dragDrop()method on it during the mousedownevent. Safari 4 and earlier required the addition of a CSS style –khtml-user-drag: elementto make an element draggable.）