参考链接：https://blog.csdn.net/qq_42068550/article/details/115459826
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽排序</title>
<style>
*{box-sizing: border-box;}
ul {
padding:0 50px;
list-style: none;
font-size: 0;
}
li {
margin-bottom:5px;
font-size: 16px;
height:60px; /*ie下必须设置*/
line-height: 60px;
border: 1px solid #ddd;
padding-left: 10px;
cursor: move;
}
.dashed{border:3px dashed #ddd;}
</style>
</head>
<body>
<ul id="container">
<li draggable="true">1</li>
<li draggable="true">2</li>
<li draggable="true">3</li>
<li draggable="true">4</li>
<li draggable="true">5</li>
<li draggable="true">6</li>
<li draggable="true">7</li>
<li draggable="true">8</li>
<li draggable="true">9</li>
<li draggable="true">10</li>
<li draggable="true">11</li>
<li draggable="true">12</li>
<li draggable="true">13</li>
<li draggable="true">14</li>
<li draggable="true">15</li>
<li draggable="true">16</li>
<li draggable="true">17</li>
<li draggable="true">18</li>
<li draggable="true">19</li>
<li draggable="true">20</li>
</ul>
</body>
</html>
<script>
var dom = document.querySelector("#container")
var draging = null
dom.ondragstart = function(event) {
draging = event.target
draging.classList.add('dashed');
var div = document.createElement('div')
// dataTransfer.setData把拖动对象的数据存入其中，可以用dataTransfer.getData来获取数据（ie无效）
// dataTransfer.setDragImage可设置拖拽层（ie无效）
// event.dataTransfer.setDragImage(div, 0, 0)
}
dom.ondragover = function(event) {
// 默认无法将数据/元素放置到其他元素中。如果需要设置允许放置，必须阻止对元素的默认处理方式
event.preventDefault()
var target = event.target
if (target.nodeName === "LI" && target !== draging) {
// 获取初始位置
var targetRect = target.getBoundingClientRect()
var dragingRect = draging.getBoundingClientRect()
if (target) {
// 判断是否动画元素
if (target.animated) {
return;
}
}
if (_index(draging) < _index(target)) {
// 目标比元素大，插到其后面
// extSibling下一个兄弟元素
target.parentNode.insertBefore(draging, target.nextSibling)
} else {
// 目标比元素小，插到其前面
target.parentNode.insertBefore(draging, target)
}
_animate(dragingRect, draging)
_animate(targetRect, target)
}
}
dom.ondragend = function(event){
event.target.classList.remove('dashed');
console.log(document.getElementsByTagName('li'))
}
// 获取元素在父元素中的index
function _index(el) {
var index = 0
if (!el || !el.parentNode) {
return -1
}
// previousElementSibling：上一个兄弟元素
while (el && (el = el.previousElementSibling)) {
index++
}
return index
}
// 触发动画
function _animate(prevRect, target) {
var ms = 300
if (ms) {
var currentRect = target.getBoundingClientRect()
if (prevRect.nodeType === 1) {
prevRect = prevRect.getBoundingClientRect()
}
_css(target, 'transition', 'none')
_css(target, 'transform', 'translate3d(' +
(prevRect.left - currentRect.left) + 'px,' +
(prevRect.top - currentRect.top) + 'px,0)'
);
target.offsetWidth; // 触发重绘
_css(target, 'transition', 'all ' + ms + 'ms');
_css(target, 'transform', 'translate3d(0,0,0)');
// 事件到了之后把transition和transform清空
clearTimeout(target.animated);
target.animated = setTimeout(function() {
_css(target, 'transition', '');
_css(target, 'transform', '');
target.animated = false;
}, ms);
}
}
// 给元素添加style
function _css(el, prop, val) {
var style = el && el.style
if (style) {
if (val === void 0) {
if (document.defaultView && document.defaultView.getComputedStyle) {
val = document.defaultView.getComputedStyle(el, '')
} else if (el.currentStyle) {
val = el.currentStyle
}
return prop === void 0 ? val : val[prop]
} else {
if (!(prop in style)) {
prop = '-webkit-' + prop;
}
style[prop] = val + (typeof val === 'string' ? '' : 'px')
}
}
}
</script>