any-grid-layout
Version:
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
82 lines (81 loc) • 2.43 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Drag Demo</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: white;
}
</style>
<script>
// 存放拖拽的元素
let dragElement = null
function onDragStart(e) {
// 获取当前拖拽元素
dragElement = e.currentTarget
}
function onDragOver(e) {
// 默认的当你dragover的时候会阻止你做drop的操作，所以需要取消这个默认
e.preventDefault()
}
function onDrop(e) {
// 当拖动结束的时候，给拖动div所在的位置下面的div做drop事件
let dropElement = e.currentTarget
if (dragElement != null && dragElement != dropElement) {
let wrapper = document.querySelector('.wrapper')
// 临时 div 用于存储 box
let temp = document.createElement('div')
// 添加 temp 到父元素 wrapper 中
wrapper.appendChild(temp)
// 交换
wrapper.replaceChild(temp, dropElement)
wrapper.replaceChild(dropElement, dragElement)
wrapper.replaceChild(dragElement, temp)
}
}
</script>
</head>
<body>
<div class="wrapper" style="display: flex">
<div
class="box"
style="background: green"
draggable="true"
ondragstart="onDragStart(event)"
ondragover="onDragOver(event)"
ondrop="onDrop(event)"
>
box1
</div>
<div
class="box"
style="background: orange"
draggable="true"
ondragstart="onDragStart(event)"
ondragover="onDragOver(event)"
ondrop="onDrop(event)"
>
box2
</div>
<div
class="box"
style="background: cyan"
draggable="true"
ondragstart="onDragStart(event)"
ondragover="onDragOver(event)"
ondrop="onDrop(event)"
>
box3
</div>
</div>
</body>
</html>