HTML5实战与剖析之原生拖拽(一拖拽历史概述)

妖狐艹你老母 2022-09-20 05:45 183阅读 0赞

提起拖拽，我就想起了在JavaScript培训的时候一个非常好玩的效果，那就是拖拽了。可以用鼠标任意拖拽着一个物体到任何你想去的地方。

最早拥有JavaScript拖拽功能的是IE4浏览器。当时，网页中只有两种对象是可以拖拽的，那就是：图形和某些文字。拖拽图像的时候，把鼠标放在图像上，按住鼠标不放就可以拖拽了。拖拽文字时，要先选中文字，然后可以像拖动图像那样拖拽选中的文字。在IE4中，唯一有效的放置拖拽文字的目标是文本框。到了IE5.5更进一步，让网页中的任何元素都可以拖拽(IE6以上也支持这些功能了)。随着浏览器一点点更新换代，随着IE7IE8以及其他浏览器的诞生，网页中所有东西都可以拖拽了，只不过是通过JavaScript程序来实现的。下面就是没有HTML5的时候，拖拽的实现小例子。

***HTML代码***

***JavaScript代码***

***CSS代码***

li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
    #div1{ width:100px; height:100px; background:red; margin:300px;}

直到HTML5的出现。HTML5是以IE为基础制定了拖拽规范。支持原生拖拽的浏览器有：Chrome、Safari 3+和Firefox 3.5+。

HTML5中的拖拽，可以在窗口间、框架间，甚至在应用间进行完美拖拽。浏览器对拖拽的支持为实现这一功能实现了便利。

HTML5实战与剖析之原生拖拽(一)——拖拽历史概述，就为大家介绍到这里了。有了HTML5拖拽，就可以实现很多非常绚丽的效果了。更过有关HTML5的更新敬请关注梦龙小站。