html5css3菜鸟教程,HTML5+CSS3实现拖放(Drag and Drop)示例

本文简单介绍一下HTML5的拖放实现。MXGHTML5中文学习网 - HTML5先行者学习网

拖放(Drag 和 drop)是 HTML5 标准的组成部分。MXGHTML5中文学习网 - HTML5先行者学习网

浏览器支持:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。MXGHTML5中文学习网 - HTML5先行者学习网

被拖元素，dragElement :MXGHTML5中文学习网 - HTML5先行者学习网

(1)添加事件：ondragstartMXGHTML5中文学习网 - HTML5先行者学习网

(2)添加属性：dragableMXGHTML5中文学习网 - HTML5先行者学习网

放置元素，dropElement:MXGHTML5中文学习网 - HTML5先行者学习网

1、添加事件：ondargenter , ondragover , ondragleave , ondragend ,ondropMXGHTML5中文学习网 - HTML5先行者学习网

和mouser划入划出一类的事件很类似，字面也很好理解，不赘述了，下面会用例子来说明。MXGHTML5中文学习网 - HTML5先行者学习网

2、页面上元素间的拖放MXGHTML5中文学习网 - HTML5先行者学习网

下面用个小例子，div间的拖放来展示，各个事件如何被触发：MXGHTML5中文学习网 - HTML5先行者学习网

MXGHTML5中文学习网 - HTML5先行者学习网

代码如下:

MXGHTML5中文学习网 - HTML5先行者学习网

MXGHTML5中文学习网 - HTML5先行者学习网

MXGHTML5中文学习网 - HTML5先行者学习网

#dropEleMXGHTML5中文学习网 - HTML5先行者学习网

divMXGHTML5中文学习网 - HTML5先行者学习网

{MXGHTML5中文学习网 - HTML5先行者学习网

float: left;MXGHTML5中文学习网 - HTML5先行者学习网

}MXGHTML5中文学习网 - HTML5先行者学习网

MXGHTML5中文学习网 - HTML5先行者学习网

MXGHTML5中文学习网 - HTML5先行者学习网

/**MXGHTML5中文学习网 - HTML5先行者学习网

* 拖放(Drag 和 drop)是 HTML5 标准的组成部分。MXGHTML5中文学习网 - HTML5先行者学习网

* 浏览器支持MXGHTML5中文学习网 - HTML5先行者学习网

*Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。MXGHTML5中文学习网 - HTML5先行者学习网

*/MXGHTML5中文学习网 - HTML5先行者学习网

$(function ()MXGHTML5中文学习网 - HTML5先行者学习网

{MXGHTML5中文学习网 - HTML5先行者学习网

$("#dragEle")[0].ondragstart = function (event)MXGHTML5中文学习网 - HTML5先行者学习网

{MXGHTML5中文学习网 - HTML5先行者学习网

console.log("dragStart");MXGHTML5中文学习网 - HTML5先行者学习网

event.dataTransfer.setData("Text", event.target.id);MXGHTML5中文学习网 - HTML5先行者学习网

};MXGHTML5中文学习网 - HTML5先行者学习网

/**MXGHTML5中文学习网 - HTML5先行者学习网

* 当放置被拖数据时，会发生 drop 事件。MXGHTML5中文学习网 - HTML5先行者学习网

* 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)MXGHTML5中文学习网 - HTML5先行者学习网

* @param eventMXGHTML5中文学习网 - HTML5先行者学习网

*/MXGHTML5中文学习网 - HTML5先行者学习网

$("#dropEle")[0].ondrop = function (event)MXGHTML5中文学习网 - HTML5先行者学习网

{MXGHTML5中文学习网 - HTML5先行者学习网

/* for (var p in event.dataTransfer)MXGHTML5中文学习网 - HTML5先行者学习网

{MXGHTML5中文学习网 - HTML5先行者学习网

console.log(p + " = " + event.dataTransfer[p] + " @@");MXGHTML5中文学习网 - HTML5先行者学习网

}MXGHTML5中文学习网 - HTML5先行者学习网

*/MXGHTML5中文学习网 - HTML5先行者学习网

console.log("onDrop");MXGHTML5中文学习网 - HTML5先行者学习网

var id = event.dataTransfer.getData("Text");MXGHTML5中文学习网 - HTML5先行者学习网

$(this).append($("#" + id).clone().text($(this).find("div").length));MXGHTML5中文学习网 - HTML5先行者学习网

event.preventDefault();MXGHTML5中文学习网 - HTML5先行者学习网

};MXGHTML5中文学习网 - HTML5先行者学习网

/**MXGHTML5中文学习网 - HTML5先行者学习网

* ondragover 事件规定在何处放置被拖动的数据。MXGHTML5中文学习网 - HTML5先行者学习网

*默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。MXGHTML5中文学习网 - HTML5先行者学习网

*/MXGHTML5中文学习网 - HTML5先行者学习网

$("#dropEle")[0].ondragover = function (event)MXGHTML5中文学习网 - HTML5先行者学习网

{MXGHTML5中文学习网 - HTML5先行者学习网

console.log("onDrop over");MXGHTML5中文学习网 - HTML5先行者学习网

event.preventDefault();MXGHTML5中文学习网 - HTML5先行者学习网

}MXGHTML5中文学习网 - HTML5先行者学习网

$("#dropEle")[0].ondragenter = function (event)MXGHTML5中文学习网 - HTML5先行者学习网

{MXGHTML5中文学习网 - HTML5先行者学习网

console.log("onDrop enter");MXGHTML5中文学习网 - HTML5先行者学习网

}MXGHTML5中文学习网 - HTML5先行者学习网

$("#dropEle")[0].ondragleave = function (event)MXGHTML5中文学习网 - HTML5先行者学习网

{MXGHTML5中文学习网 - HTML5先行者学习网

console.log("onDrop leave");MXGHTML5中文学习网 - HTML5先行者学习网

}MXGHTML5中文学习网 - HTML5先行者学习网

$("#dropEle")[0].ondragend = function (event)MXGHTML5中文学习网 - HTML5先行者学习网

{MXGHTML5中文学习网 - HTML5先行者学习网

console.log("onDrop end");MXGHTML5中文学习网 - HTML5先行者学习网

}MXGHTML5中文学习网 - HTML5先行者学习网

});MXGHTML5中文学习网 - HTML5先行者学习网

MXGHTML5中文学习网 - HTML5先行者学习网

MXGHTML5中文学习网 - HTML5先行者学习网

MXGHTML5中文学习网 - HTML5先行者学习网

MXGHTML5中文学习网 - HTML5先行者学习网

系统中选择的一个或多个文件拖入该div中，files中会存储拖入文件的信息，然后我们通过file可以得到文件的类型，长度，内容然后实现上传。MXGHTML5中文学习网 - HTML5先行者学习网

3、setDragImage(image, x, y)用于设置鼠标移动过程中随鼠标一起移动的效果图。必须在dragstart中设置。MXGHTML5中文学习网 - HTML5先行者学习网

4、types,effectAllowed和dropEffect分别是拖入元素的类型，拖拽过程中鼠标显示的样式，不过通常可以忽略这几个属性，一般用不到。MXGHTML5中文学习网 - HTML5先行者学习网

这就是微学网-程序员之家为你提供的"HTML5+CSS3实现拖放(Drag and Drop)示例"希望对你有所帮助.本文来自网络，转载请注明出处：http://www.weixuecn.cn/article/6737.html