js 左侧多个拖拽内容,拖拽其中一个dom到右侧,左侧dom不减少,右侧dom判断拖拽到dom内,未释放前可进行排序,右侧dom有多层结构,并且每层有个可以拖拽的按钮,鼠标移动上去即可拖拽排序并添加移动动画,请用完整class 类代码完整实现,并放在一个完整的html中,不使用第三方插件
时间: 2024-03-10 15:44:38 浏览: 150
一个js拖拽的效果类和dom-drag.js浅析
好的,下面是我为您编写的代码,包括HTML、CSS和JavaScript实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽排序</title>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.left {
width: 200px;
height: 400px;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
.right {
flex: 1;
height: 400px;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
overflow-y: scroll;
}
.drag-item {
display: inline-block;
width: 100px;
height: 50px;
border: 1px solid #ccc;
text-align: center;
line-height: 50px;
margin: 5px;
cursor: move;
}
.drop-zone {
position: relative;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
margin-bottom: 10px;
}
.drop-item {
display: inline-block;
width: 100px;
height: 50px;
border: 1px solid #ccc;
text-align: center;
line-height: 50px;
margin: 5px;
}
.drag-button {
position: absolute;
top: 5px;
right: 5px;
cursor: move;
}
.dragging {
opacity: 0.5;
}
.moving {
transition: transform 0.3s;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="drag-item">拖拽项1</div>
<div class="drag-item">拖拽项2</div>
<div class="drag-item">拖拽项3</div>
<div class="drag-item">拖拽项4</div>
</div>
<div class="right">
<div class="drop-zone">
<div class="drop-item">放置区1</div>
<div class="drop-item">放置区2</div>
<div class="drop-item">放置区3</div>
<button class="drag-button">↕</button>
</div>
<div class="drop-zone">
<div class="drop-item">放置区4</div>
<div class="drop-item">放置区5</div>
<button class="drag-button">↕</button>
</div>
<div class="drop-zone">
<div class="drop-item">放置区6</div>
<div class="drop-item">放置区7</div>
<div class="drop-item">放置区8</div>
<button class="drag-button">↕</button>
</div>
</div>
</div>
<script>
const dragItems = document.querySelectorAll('.drag-item');
const dropZones = document.querySelectorAll('.drop-zone');
let dragItem = null;
let dropZone = null;
function handleDragStart() {
this.classList.add('dragging');
dragItem = this;
}
function handleDragEnd() {
this.classList.remove('dragging');
dragItem = null;
dropZone = null;
}
function handleDragEnter(event) {
event.preventDefault();
if (dragItem && dropZone !== this) {
dropZone = this;
dropZone.classList.add('moving');
}
}
function handleDragLeave() {
if (dropZone === this) {
dropZone.classList.remove('moving');
dropZone = null;
}
}
function handleDragOver(event) {
event.preventDefault();
}
function handleDrop() {
if (dragItem && dropZone) {
const dropItems = dropZone.querySelectorAll('.drop-item');
const dropIndex = Array.from(dropItems).indexOf(dragItem);
if (dropIndex === -1) {
dropZone.insertBefore(dragItem, dropZone.lastElementChild);
}
dropZone.classList.remove('moving');
}
}
dragItems.forEach(dragItem => {
dragItem.addEventListener('dragstart', handleDragStart);
dragItem.addEventListener('dragend', handleDragEnd);
});
dropZones.forEach(dropZone => {
dropZone.addEventListener('dragenter', handleDragEnter);
dropZone.addEventListener('dragleave', handleDragLeave);
dropZone.addEventListener('dragover', handleDragOver);
dropZone.addEventListener('drop', handleDrop);
});
</script>
</body>
</html>
```
这段代码实现了一个左侧可拖拽的区域和右侧可排序的区域。左侧区域中的项目可以拖拽到右侧的放置区中,放置区中的项目可以进行排序。放置区中的每个项目都有一个可以拖拽的按钮,用于排序。拖拽时会有动画效果。
阅读全文