查看: 2346|回复: 0

[HTML代码] HTML5拖拽事件笔记

发表于 2018-1-2 08:00:00

在HTML5的规范中,我们可以通过为元素增加`draggable="true"`来设置此元素是否可以进行拖拽操作,其中图片、链接默认是开启的。

1. 拖拽元素:设置了`draggable="true"`的元素

当拖动某元素时,将依次触发下列事件:

1. dragstart(按下鼠标并开始移动鼠标时,会在被拖放的元素上触发dragstart事件)

2. drag(触发dragstart事件后,随即会触发drag时间,而且在元素被拖动器件会持续触发该事件)

3. dragend(当拖动停止时,无论是否把元素放到了有效的放置目标上,会触发dragend事件)

2. 目标元素:页面中的任何一个元素都可以成为目标元素

当某个元素倍拖动到一个有效的目标上时,下列事件会依次发生:

1. dragenter(只要有元素倍拖放到目标上,就会触发dragenter事件)

2. dragover(dragenter被触发后紧接着触发dragover事件,在被拖动目标一直在目标范围内时,dragover事件会持续被触发)

3. dragleave或drop(如果元素被拖出了放置目标,dragover事件不再触发,但会触发dragleave事件;如果元素被放到了目标元素中,则触发drop事件而不是dragleave事件)

3. 自定义目标元素

虽然所有的元素都支持放置目标事件,但是这些元素默认是不允许放置的。如果拖动元素经过不允许放置的元素,无论永辉如何操作,都不会触发drop事件。

如果需要设置允许放置,我们必须阻止对元素的默认处理方式:

这要通过调用 dragover 事件的 event.preventDefault() 方法来阻止默认事件发生,即改变目标元素不允许放置属性,这时,当元素在目标元素上被鼠标释放时,就会触发drop事件。




回复

使用道具 举报