1. 设置元素为可拖放
首先,为了使元素可拖动,把 draggable 属性设置为 true
:
<img draggable="true">
2. 拖放事件
拖放涉及到两种元素,一种是被拖拽元素(源对象),一种是放置区元素(目标对象)。如下图所示,按住A元素往B元素拖拽,A元素即为源对象,B元素即为目标对象。
3.事件文档
需要注意的是:dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此,我们必须阻止浏览器这种默认行为。e.preventDefault();