【前端】一个拖拽效果

拖拽图片

其实原生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>

为了完成拖拽事件，需要关注三个事件。

dragstart、d