拖拽图片
其实原生API是支持拖拽的。试想一个业务场景,有许多图片在竖向排列在左侧,右侧区域有一个矩形框,可以通过拖拽,将左侧的图片复制进右侧的矩形区域中。
先写好页面结构。左侧有三个img-item,由imgbox包裹。img-item里是一个img,有draggable="true"属性。右侧有个矩形框。
<div class="imgbox" id="imgbox">
<div class="img-item">
<img src="." alt="1" draggable="true" />
</div>
<div class="img-item">
<img src="." alt="1" draggable="true" />
</div>
<div class="img-item">
<img src="." alt="1" draggable="true" />
</div>
</div>
<div class="dragbox" id="dragbox"></div>
为了完成拖拽事件,需要关注三个事件。