当前位置：首页 > news >正文

一篇文带你使用js实现拖拽排序

news 来源：原创 2024/9/29 7:28:15

先介绍一下html5的drag属性,拖放（Drag 和 drop）是 HTML5 标准的组成部分。想要启用drag，只要给元素加上draggable="true"就行了（Safari 5.1.2除外）。
实际效果：

拖动事件(了解事件详情)
事件分为两类，当前拖动的元素上的事件，以及要放置的位置接收到的事件。
一.发生在拖动元素上的事件：

事件名触发时机触发次数
dragstart 当拖动开始时触发一次 1
drag 拖动开始后反复触发 n
dragend 拖动结束后触发一次

二.发生在目标元素上的事件

事件名触发时机触发次数
dragenter 当拖动元素进入目标时触发一次 1
dragover 当拖动元素在目标元素范围内时反复触发 n
drop 拖动元素在目标元素内释放时(在设置了dropover事件的前提下) 1

信息传递

在拖动元素时可以设置传递的信息
event.dataTransfer.setData(“te”, “sss);
两个参数，第一个参数key，第二个参数value。
注意只能传递字符串和url，但是在firefox使用text或Text作为key时会打开新的标签页，所以不要用他们作为key。


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{list-style: none;margin: 0;padding: 0;}#container{width: 500px;margin: 100px auto;}.ele {width:100%;height: 40px;border: 1px solid #999;background: cadetblue;margin-top: 2px;border-radius: 10px;padding-left: 10px;color: white;cursor: move;}</style>
</head>
<body>
<ul id="container"><li class="ele" draggable="true">1</li><li class="ele" draggable="true">2</li><li class="ele" draggable="true">3</li><li class="ele" draggable="true">4</li>
</ul>
<script>var node = document.querySelector("#container");var draging = null;//使用事件委托，将li的事件委托给ulnode.ondragstart = function(event) {//console.log("start");//firefox设置了setData后元素才能拖动！！！！//event.target出发事件的元素event.dataTransfer.setData("te", event.target.innerText); //不能使用text，firefox会打开新tab//event.dataTransfer.setData("self", event.target);draging = event.target;}node.ondragover = function(event) {//console.log("onDrop over");//取消默认行为event.preventDefault();var target = event.target;//因为dragover会发生在ul上，所以要判断是不是liif (target.nodeName === "LI") {if (target !== draging) {//getBoundingClientRect()用于获取某个元素相对于视窗的位置集合var targetRect = target.getBoundingClientRect();var dragingRect = draging.getBoundingClientRect();if (target) {if (target.animated) {return;}}if (_index(draging) < _index(target)) {//nextSibling 属性可返回某个元素之后紧跟的节点（处于同一树层级中）。target.parentNode.insertBefore(draging, target.nextSibling);} else {target.parentNode.insertBefore(draging, target);}_animate(dragingRect, draging);_animate(targetRect, target);}}}//获取元素在父元素中的indexfunction _index(el) {var index = 0;if (!el || !el.parentNode) {return -1;}//previousElementSibling属性返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。while (el && (el = el.previousElementSibling)) {//console.log(el);index++;}return index;}function _animate(prevRect, target) {var ms = 300;if (ms) {var currentRect = target.getBoundingClientRect();//nodeType 属性返回以数字值返回指定节点的节点类型。1=元素节点  2=属性节点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; // 触发重绘//放在timeout里面也可以// setTimeout(function() {//     _css(target, 'transition', 'all ' + ms + 'ms');//     _css(target, 'transform', 'translate3d(0,0,0)');// }, 0);_css(target, 'transition', 'all ' + ms + 'ms');_css(target, 'transform', 'translate3d(0,0,0)');clearTimeout(target.animated);target.animated = setTimeout(function() {_css(target, 'transition', '');_css(target, 'transform', '');target.animated = false;}, ms);}}//给元素添加stylefunction _css(el, prop, val) {var style = el && el.style;if (style) {if (val === void 0) {//使用DefaultView属性可以指定打开窗体时所用的视图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>
</body>
</html>