拖放是一种常见的特性,也就是抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
拖放事件
拖放是由拖动与释放两部分组成,拖放事件也分为被拖动元素的相关事件,和容器的相关事件。
被拖动元素的相关事件如下所示:
事件
描述
ondragstart
用户开始拖动元素时触发
ondrag
元素正在拖动时触发
ondragend
用户完成元素拖动后触发
容器相关事件如下所示:
事件
描述
ondragenter
当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover
当被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave
当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop
在一个拖动过程中,释放鼠标键时触发此事件
如何实现元素的拖放
我们通过上述的拖放事件来实现将下图“你好,侠课岛”,拖放到上面的矩形框中的演示效果:
首先创建一个HTML文本,用于测试代码,如下所示:
HTML5学习(9xkd.com).div1{
width:200px;
height:100px;
padding:20px;
bo