HTML实现鼠标拖动元素排序

短命女 2023-10-07 19:06 56阅读 0赞

### 1. 简介 ###

拖放（Drag和 drop）是 HTML5 标准的组成部分，为了使元素可拖动，必须把 draggable 属性设置为 true，  
整个拖拽事件触发的顺序如下：

> dragstart-> drag -> dragenter -> dragover -> dragleave -> drop  
> \->dragend

拖放事件事件详情  
一个元素被拖放，他可能会经过很多个元素上，最终到达想要放置的元素内。这里，我暂时把被拖放的元素称为源对象，被经过的元素称为过程对象，到达的元素称为目标对象。不同的对象产生不同的拖放事件。

源对象事件：

> dragstart：源对象开始拖放，开始移动时事件触发  
> drag：源对象拖放过程中，移动被拖拽对象时触发  
> dragend：源对象拖放结束，整个拖放操作结束时触发。

过程对象事件：

> dragenter：源对象进入过程对象范围内，被拖拽对象进入过程对象时被触发  
> dragover：源对象在过程对象范围内移动，被拖拽对象在过程对象内移动时触发  
> dragleave：源对象离开过程对象的范围，被拖拽对象离开目标对象时触发

目标对象事件：

> drop：源对象拖放到目标对象中，目标对象完全接受被拖拽对象时触发，可理解为在目标对象内松手时触发。
> 
> dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。e.preventDefault();

如果drop接收盒子要想接收到元素，那么接收的拖动元素 dragenter和dragover必须阻止默认行为。

### 2. HTML部分 ###

添加属性如下：

> draggable=“true”  
> οndrοp=“drop(event,this)”  
> οndragοver=“allowDrop(event)”  
> οndragstart=“drag(event, this)”

例如：

### 3. JS部分 ###

直接coby即可：

还没有评论，来说两句吧...