HTML5元素拖放

概叙

HTML5中的元素都是可以拖放的,拖放可以分成两个动作。
在某个元素上按下,然后开始移动鼠标,在移动的过程中,只要没有松开鼠标,将会不断产生拖动事件,这个过程称为“拖”。
把被“拖”的移到另一个元素上并松开鼠标,这个动作被称为“放”。
拖放操作“拖”和“放”两个动作组成。

了解拖放相关操作

被拖动的元素

ondragstart:开始拖动触发此事件
ondrag:拖动时不断触发此事件
ondragend:拖动结束触发此事件

被拖动元素经过的元素

ondragenter:被拖动的元素进入此元素范围内触发此事件
ondragover:被拖动的元素进入此元素范围内拖动时会不断的触发此事件
ondraglcave:被拖动的元素离开此元素范围内触发此事件
ondrop:被拖动的元素放到了此元素里触发此事件

了解DataTransfer对象

拖动触发的事件对象里有一个dataTransfer属性,该属性值是一个DataTransfer对象,通过此对象,可以让拖放操作实现更丰富的功能,例如存取数据,设置拖放行为等,在次就不做跟详细的介绍了。更详细请参考:HTML5中dataTransfer对象应用详解

启动“拖”

在Html5中 < img../ >元素默认是可以拖动的;而< a../ >元素只要设置了href属性,默认也是可以拖动的。
对于其他元素来说,想要把他变成拖动的,只要把该元素的draggable属性设置为true即可。

<div draggable="true"></div>

接受“放”

在拖动的过程中,不管是拖动< img../ >元素还是< div../ >元素,拖动时都显示了一个“禁止”的图标,这表明被拖动到“目的地”并不接受此拖动元素,这是因为document对象默认是阻止了此拖动事件,而其它HTML元素也是位于document对象内的,因此它们也不能接受“放”。
为了document对象可以接受“放”,可以为document对象的ondragover事件指定监听器,返回一个false,取消document对象对拖动事件的默认行为,这样,拖动时就不会显示“禁止”的图标了,如果只需要对某一个HTML元素进行接受,那就将此元素对象的ondragover事件指定监听器,返回一个false。

<script>
    document.ondragover = function(event){
        return false;
    }
</script>

欢迎分享本文,转载请保留出处:前端ABC » HTML5元素拖放

赞 (1)
分享到:更多 ()

发表评论 0