js 左侧多个拖拽内容,拖拽其中一个dom到右侧,左侧dom不减少,右侧dom判断拖拽到dom内,未释放前可进行排序,右侧dom可拖拽排序并添加移动动画,请用完整class 类代码实现,兼容谷歌低版本浏览器
时间: 2024-01-10 14:03:08 浏览: 34
好的,以下是一个基于原生JavaScript实现的可拖拽排序的示例代码,支持谷歌低版本浏览器:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可拖拽排序</title>
<style>
.wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.left, .right {
width: 45%;
height: 300px;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
.left > div, .right > div {
width: 100%;
height: 50px;
margin-bottom: 10px;
background-color: #eee;
text-align: center;
line-height: 50px;
cursor: move;
}
.dragging {
opacity: 0.5;
}
.right .placeholder {
height: 50px;
background-color: #ccc;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
<div draggable="true">左侧1</div>
<div draggable="true">左侧2</div>
<div draggable="true">左侧3</div>
</div>
<div class="right"></div>
</div>
<script>
class DragSort {
constructor(leftSelector, rightSelector) {
this.left = document.querySelector(leftSelector);
this.right = document.querySelector(rightSelector);
this.placeholder = document.createElement('div');
this.placeholder.classList.add('placeholder');
// 左侧拖拽事件
this.left.addEventListener('dragstart', e => {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', null);
this.dragging = e.target;
this.dragging.classList.add('dragging');
});
this.left.addEventListener('dragend', e => {
this.dragging.classList.remove('dragging');
this.dragging = null;
});
// 右侧拖拽事件
this.right.addEventListener('dragover', e => {
e.preventDefault();
const afterElement = this.getAfterElement(e.clientY);
this.right.insertBefore(this.placeholder, afterElement);
});
this.right.addEventListener('drop', e => {
e.preventDefault();
this.right.insertBefore(this.dragging, this.placeholder);
this.placeholder.remove();
});
// 右侧排序事件
let draggingElement = null;
let startY = 0;
this.right.addEventListener('mousedown', e => {
if (e.target !== this.right) {
draggingElement = e.target;
startY = e.clientY;
}
});
window.addEventListener('mousemove', e => {
if (draggingElement) {
const offsetY = e.clientY - startY;
draggingElement.style.transform = `translateY(${offsetY}px)`;
const afterElement = this.getAfterElement(e.clientY);
if (afterElement) {
this.right.insertBefore(draggingElement, afterElement);
}
}
});
window.addEventListener('mouseup', () => {
if (draggingElement) {
draggingElement.style.transform = '';
draggingElement = null;
}
});
}
getAfterElement(y) {
const elements = [...this.right.querySelectorAll('div:not(.placeholder)')];
return elements.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) {
return { offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}
}
new DragSort('.left', '.right');
</script>
</body>
</html>
```
这是一个简单的示例代码,实现了左侧拖拽到右侧后的排序功能,以及右侧的拖拽排序功能。同时,也考虑了兼容性问题,支持谷歌低版本浏览器。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)