当前位置:Gxlcms > html代码 > HTML5+CSS3实现拖放(DragandDrop)示例_html5教程技巧

HTML5+CSS3实现拖放(DragandDrop)示例_html5教程技巧

时间:2021-07-01 10:21:17 帮助过:25人阅读

本文简单介绍一下HTML5的拖放实现。
拖放(Drag 和 drop)是 HTML5 标准的组成部分。
浏览器支持:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

被拖元素,dragElement :
(1)添加事件:ondragstart
(2)添加属性:dragable

放置元素,dropElement:
1、添加事件:ondargenter , ondragover , ondragleave , ondragend ,ondrop
和mouser划入划出一类的事件很类似,字面也很好理解,不赘述了,下面会用例子来说明。

2、页面上元素间的拖放
下面用个小例子,div间的拖放来展示,各个事件如何被触发:

代码如下: