html5 draggable支持,html5 的draggable属性使用<转载收藏>

在HTML5中，已经支持在浏览器与其他应用程序之间的数据互相拖动，同时也大大简化了有关于拖放方面的代码。

实现拖放的步骤

在HTML5中要想实现拖放操作，至少要经过两个步骤：

将想要拖放的对象元素的draggable属性设为true(draggable="true")。这样才能将该元素进行拖放。另外，img元素和a元素(必须指定href属性)默认允许拖放。

编写与拖放有关的事件处理代码。关于拖放存在的几个事件如下所示。

拖放的相关事件

事件

产生事件的元素

描述

dragstart

被拖放的元素。

开始拖放操作。

drag

被拖放的元素。

拖放过程中。

dragenter

拖放过程中鼠标经过的元素。

被拖放的元素开始进入本元素的范围内。

dragover

拖放过程中鼠标经过的元素。

被拖放的元素正在本元素范围内移动。

dragleave

拖放过程中鼠标经过的元素。

被拖放的元素离开本元素的范围。

drop

拖放的目标元素。

有其他元素被拖放到了本元素中。

dragend

拖放的目标元素。

拖放操作结束。

拖放示例如下，为使用方便，为jQuery增加如下函数：

Js代码  

jQuery.fn.dragstart = function(handler) {

return this.each(function() {

this.addEventListener("dragstart", handler, false);

});

};

jQuery.fn.drag = function(handler) {

return this.each(function() {

this.addEventListener("drag", handler, false);

});

};

jQuery.fn.dragenter = function(handler) {

return this.each(function() {

this.addEventListener("dragenter", handler, false);

});

};

jQuery.fn.dragover = function(handler) {

return this.each(function() {

this.addEventListener("dragover", handler, false);

});

};

jQuery.fn.dragleave = function(handler) {

return this.each(function() {

this.addEventListener("dragleave", handler, false);

});

};

jQuery.fn.drop = function(handler) {

var handler1 = function(event) {

handler(event);

event.preventDefault();

event.stopPropagation();

};

return this.each(function() {

this.addEventListener("drop", handler, false);

});

};

jQuery.fn.dragend = function(handler) {

var handler1 = function(event) {

handler(event);

event.preventDefault();

};

return this.each(function() {

this.addEventListener("dragend", handler, false);

});

};

拖放操作所使用的示例HTML页面代码如下：

Html代码  

html>

施放示例

简单拖放示例

请施放

进行拖放操作的JavaScript代码如下：

Js代码  

$(function() {

$(document).dragover(function(event) {

event.preventDefault();

});

$("#dragme").dragstart(function(event) {

var dt = event.dataTransfer;

dt.effectAllowed = 'all';

dt.setData("text/plain", "Hello World.");

});

$("#text").dragend(function(event) {}).drop(function(event) {

var dt = event.dataTransfer;

var text = dt.getData("text/plain");

$(this).append(text);

});

});

代码要点说明：

开始拖动(dragstart事件发生)时，把要拖动的数据存入DataTransfer对象(setData()方法)。DataTransfer对象专门用来存放拖放时要携带的数据，它可以被设置为拖动事件对象的dataTransfer属性。setData()方法中的第一个参数为携带数据的数据各类的字符串，第二个参数为要携带的数据。第一个参数中表示数据各类的字符串里只能填入类似“text/plain”或“text/html”的表示MIME类型的文字，不能填入其他文字。

如果把“dt.setData("text/plain", "Hello World.")”改为“dt.setData("text/plain", this.id)”，因为把被拖动元素的id当成了参数，所以携带的数据就是被拖动元素中的数据了，因为浏览器在使用getData()方法读取数据时会自动读取该元素中的数据。

针对拖放的目标元素，必须在dragend或dragover事件内调用“event.preventDefault()”方法。因为默认情况下，拖放的目标元素是不允许接受元素的，为了把元素拖放到其中，必须把默认处理关闭。

目标元素接受到被拖放的元素后，执行getData()方法从DataTransfer那里获得数据。getData()方法的参数为setData()方法中指定的数据种类。

要实现拖放过程，还必须在目标元素的drop事件中关闭默认处理(拒绝被拖放)，否则目标元素不能接受被拖放的元素。

要实现拖放过程，还必须设定整个页面为不执行默认处理(拒绝被拖放)，否则拖放处理也不能被实现。因为页面是先于其他元素接受拖放的，如果页面上拒绝拖放，则页面上其他元素就都不能接受拖放了。

要使用元素可以被拖放，首先必须把该元素的draggable属性设为true。另外，为了让这个示例在所有支持拖放API的浏览器中都能正常运行，需要指定“-webkit-user-drag:element”这种Webkit特有的CSS属性。

本示例中的数据种类使用了“text/plain”这个MIME类型，也可以从其他使用同样MIME类型的应用程序中把该类型的数据拖动到目标元素中。现在支持拖动处理的MIME的类型有：“text/plain(文本文字)”、“text/html(HTML文字)”、“text/xml(XML文字)”、“text/uri-list(URL列表，每个URL为一行)”。

DataTransfer对象的属性与方法

如果DataTransfer对象的属性和方法使用得好，可以实现定制拖放图标，让它只支持特定拖放(例如复制、移动等)，甚至可以实现更复杂的拖放操作：

dropEffect属性：表示拖放操作的视觉效果，允许对其进行值的设定。该效果必须在用effectAllowed属性指定的允许的视觉效果的范围内，允许指定的值为none、copy、link、move。

effectAllowed属性：用来指定当元素被拖放时所允许的视觉效果，可以指定的值为：none、copy、copyLink、copyMove、link、linkMove、move、all、unintialize。

type属性：存入数据的种类，字符串的伪数组。

void clearData(DOMString format)方法：清除DataTransfer对象中存放的数据，如果省略参数，则清除全部数据。

void setData(DOMString format, DOMString data)方法：向DataTransfer对象内存入数据。

DOMString getData(DOMString format)方法：从DataTransfer对象中读数据。

void setDragImage(Element image, long x, long y)方法：用img元素来设置拖放图标(部分浏览器中可以用canvas等其他元素来设置)。

setData()方法在拖放开始时向dataTransfer对象中存入数据，它用type属性来指定数据MIME类型，而getData()方法在拖动结束时读取dataTransfer对象中的数据。clearData()方法可以用来清除DataTransfer对象内的数据。

设定拖放时的视觉效果

dropEffect属性与effectAllowed属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示当一个元素被拖动时所允许的视觉效果，一般在ondragstart事件中设定，允许设定的值为none、copy、copyLink、copyMove、link、linkMove、move、all、unintialize。dropEffect属性表示实际拖放时的视觉效果，一般在ondragover事件中指定，允许设定的值为none、copy、link、move。dropEffect属性所表示的实际视觉效果必须在effectAllowed属性所表示的允许的视觉效果范围内。规则如下所示：

如果effectAllowed属性设定为none，则不允许拖放元素。

如果不dropEffect属性设定为none，则不允许被拖放到目标元素中。

如果effectAllowed属性设定为all或不设定，则dropEffect属性允许被设定为任何值，并且按指定的视觉效果进行显示。

如果effectAllowed属性设定为具体效果(不为none、all)，dropEffect属性也设定了具体视觉效果，则两个具体效果值必须完全相等，否则不允许将被拖放元素拖放到目标元素中。

Js代码  

$("#dragme").dragstart(function(event) {

var dt = event.dataTransfer;

dt.effectAllowed = 'copy';

dt.setData("text/plain", "Hello.");

});

$("#text").dragover(function(event) {

var dt = event.dataTransfer;

dt.dropEffect = 'copy';

event.preventDefault();

});

自定义拖放图标

除了上面所说的使用effectAllowed属性与dropEffect属性外，HTML5中还允许自定义拖放图标——指的是在用鼠标拖动元素的过程中，位于鼠标指针下部的小图标。

DataTransfer对象有一个setDragImage()方法，该方法有三个参数，第一个参数image设定为拖放图标的图标元素，第二个参数为拖放图标离鼠标指针的x轴方向的位移量，第三个参数是拖放图标离鼠标指针的y轴方向的位移量。

Js代码  

$('#dragme').dragstart(function(event) {

var dt = event.dataTransfer;

dt.setDragImage($('img').attr("src", "images/img1.jpg")[0], -10, -10);

dt.setData("text/plain", "Welcome");

});