HTML拖拽功能（纯html5+JS实现）
1、HTML拖拽--单元行拖动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.list {
padding: 0;
margin: 0;
padding-top: 10px;
width: 500px;
border: 1px solid;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
margin: 0 auto;
list-style: none;
/* 去除ul小点 */
}
.list-item {
user-select: none;
width: 400px;
height: 45px;
line-height: 45px;
text-align: center;
border: 1px solid;
margin-bottom: 10px;
/* 渐变背景 */
background: linear-gradient(to right, #e9afaa, #51b9ff);
cursor: move;
color: #fff;
border-radius: 5px;
}
/*移动中样式*/
.list-item.moving {
background: transparent;
color: transparent;
border: 1px dashed #ccc;
}
</style>
</head>
<body>
<ul class="list">
<li draggable="true" class="list-item">1</li>
<li draggable="true" class="list-item">2</li>
<li draggable="true" class="list-item">3</li>
<li draggable="true" class="list-item">4</li>
<li draggable="true" class="list-item">5</li>
<li draggable="true" class="list-item">6</li>
<li draggable="true" class="list-item">7</li>
<li draggable="true" class="list-item">8</li>
</ul>
<script>
/*(1)获取父元素dom*/
const list = document.querySelector('.list');
let sourceNode; //当前在拖动的节点
/*拖动开始-- 当前选中节点增加样式*/
list.ondragstart = e => {
setTimeout(() => {
e.target.classList.add('moving')//给当前选中增加样式
}, 0);
sourceNode = e.target
e.dataTransfer.effectAllowed = 'move';//允许移动操作
}
/*拖动在目标区域移动*/
list.ondragover = e => {
e.preventDefault() // 允许放置
}
/*拖动进入目标区域 */
list.ondragenter = e => {
e.preventDefault(); // 允许放置
if (e.target === list || e.target === sourceNode) {
return
}
const children = Array.from(list.children) //创建新数组进行操作
const sourceIndex = children.indexOf(sourceNode) //获取拖动开始下标
const targetIndex = children.indexOf(e.target) //获取当前下标
/*位置挪动*/
if (sourceIndex < targetIndex) {
list.insertBefore(sourceNode, e.target.nextElementSibling)
} else {
list.insertBefore(sourceNode, e.target)
}
}
/*拖动结束-- 重置拖动样式状态*/
list.ondragend = e => {
e.target.classList.remove('moving')
}
</script>
</body>
</html>2、HTML拖拽--九宫格拖动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html_拖动-九宫格</title>
<style>
.list {
padding: 0;
margin: 0;
padding-top: 10px;
width: 660px;
border: 1px solid;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
list-style: none;
/* 去除ul小点 */
}
.list-item {
box-sizing: border-box;
cursor: move;
display: inline-block;
user-select: none;
width: 200px;
height: 200px;
margin-bottom: 10px;
/* 渐变背景 */
background: linear-gradient(to right, #e9afaa, #51b9ff);
border: 1px solid;
color: #fff;
border-radius: 10px;
margin:10px 10px;
display: flex;
align-items: center;
justify-content: center;
}
/*移动中样式*/
.list-item.moving {
opacity: 0.5;
/* background: transparent; */
/* color: transparent; */
border: 1px dashed #ccc;
}
</style>
</head>
<body>
<ul class="list">
<li draggable="true" class="list-item">1</li>
<li draggable="true" class="list-item">2</li>
<li draggable="true" class="list-item">3</li>
<li draggable="true" class="list-item">4</li>
<li draggable="true" class="list-item">5</li>
<li draggable="true" class="list-item">6</li>
<li draggable="true" class="list-item">7</li>
<li draggable="true" class="list-item">8</li>
<li draggable="true" class="list-item">9</li>
</ul>
<script>
/*(1)获取父元素dom*/
const list = document.querySelector('.list');
let sourceNode; //当前在拖动的节点
/*拖动开始-- 当前选中节点增加样式*/
list.ondragstart = e => {
setTimeout(() => {
e.target.classList.add('moving')//给当前选中增加样式
}, 0);
sourceNode = e.target
e.dataTransfer.effectAllowed = 'move';//允许移动操作
}
/*拖动在目标区域移动*/
list.ondragover = e => {
e.preventDefault() // 允许放置
}
/*拖动进入目标区域 */
list.ondragenter = e => {
e.preventDefault(); // 允许放置
if (e.target === list || e.target === sourceNode) {
return
}
const children = Array.from(list.children) //创建新数组进行操作
const sourceIndex = children.indexOf(sourceNode) //获取拖动开始下标
const targetIndex = children.indexOf(e.target) //获取当前下标
/*位置挪动*/
if (sourceIndex < targetIndex) {
list.insertBefore(sourceNode, e.target.nextElementSibling)
} else {
list.insertBefore(sourceNode, e.target)
}
}
/*拖动结束-- 重置拖动样式状态*/
list.ondragend = e => {
e.target.classList.remove('moving')
}
</script>
</body>
</html>3、html拖拽事件
在HTML和JavaScript中，拖放操作涉及多个事件，这些事件可以让你在不同的阶段处理拖放行为。ondragenter 是其中一个事件，它在拖动元素进入目标元素的边界时触发。以下是拖放操作中常用的事件及其用途：
1、dragstart
- 触发时机：拖动操作开始时触发。
- 用途：可以用来设置拖动数据和拖动效果。
- 示例：
javascript
element.ondragstart = function(event) {
event.dataTransfer.setData("text/plain", event.target.id);
};2. drag
- 触发时机：拖动过程中不断触发。
- 用途：可以用来提供拖动过程中的反馈，例如更新拖动图标或状态。
- 示例：
javascript
element.ondrag = function(event) {
// 更新拖动状态
};3. dragenter
- 触发时机：拖动元素进入目标元素的边界时触发。
- 用途：可以用来设置目标元素的样式，表示可以放置。
- 示例：
javascript
targetElement.ondragenter = function(event) {
event.target.style.border = "2px dashed #000";
};4. dragover
- 触发时机：拖动元素在目标元素上移动时触发。
- 用途：可以用来设置放置效果，例如允许或禁止放置。
- 示例：
javascript
targetElement.ondragover = function(event) {
event.preventDefault(); // 允许放置
};5. dragleave
- 触发时机：拖动元素离开目标元素的边界时触发。
- 用途：可以用来重置目标元素的样式。
- 示例：
javascript
targetElement.ondragleave = function(event) {
event.target.style.border = "none";
};6. drop
- 触发时机：在目标元素上释放拖动元素时触发。
- 用途：可以用来处理放置操作，例如获取拖动数据并进行处理。
- 示例：
javascript
targetElement.ondrop = function(event) {
event.preventDefault();
const data = event.dataTransfer.getData("text/plain");
const draggedElement = document.getElementById(data);
// 处理放置操作
};7. dragend
- 触发时机：拖动操作结束时触发，无论是在目标元素上释放还是取消拖动。
- 用途：可以用来重置拖动状态和样式。
- 示例：
javascript
element.ondragend = function(event) {
// 重置拖动状态
};