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) {
  // 重置拖动状态
};复制

	<!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>

	javascript

	element.ondragstart = function(event) {
	event.dataTransfer.setData("text/plain", event.target.id);
	};

	javascript

	element.ondrag = function(event) {
	// 更新拖动状态
	};

	javascript

	targetElement.ondragenter = function(event) {
	event.target.style.border = "2px dashed #000";
	};

	javascript

	targetElement.ondragover = function(event) {
	event.preventDefault(); // 允许放置
	};

	javascript

	targetElement.ondragleave = function(event) {
	event.target.style.border = "none";
	};

	javascript

	targetElement.ondrop = function(event) {
	event.preventDefault();
	const data = event.dataTransfer.getData("text/plain");
	const draggedElement = document.getElementById(data);
	// 处理放置操作
	};

	javascript

	element.ondragend = function(event) {
	// 重置拖动状态
	};

HTML拖拽功能（纯html5 JS实现）

1、HTML拖拽--单元行拖动

2、HTML拖拽--九宫格拖动

3、html拖拽事件

1、dragstart

2. drag

3. dragenter

4. dragover

5. dragleave

6. drop

7. dragend

微信扫一扫：分享

`1、dragstart`

2. `drag`

3. `dragenter`

4. `dragover`

5. `dragleave`

6. `drop`

7. `dragend`