js拖拽排序

最新推荐文章于 2024-06-19 15:39:02 发布

niuyueyang

最新推荐文章于 2024-06-19 15:39:02 发布

阅读量936

点赞数 1

分类专栏： js 原生js 文章标签： js

本文链接：https://blog.csdn.net/qq_33332184/article/details/95481954

版权

js 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

原生js

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul {
		        list-style: none;
		        margin: 200px;
		        font-size: 0;
		    }
		    .ele {
		        font-size: 16px;
		        width: 100px;
		        height: 40px;
		        border: 1px solid #999;
		        background: #EA6E59;
		        margin: 2px 0;
		        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>
	        <li class="ele" draggable="true">5</li>
	        <li class="ele" draggable="true">6</li>
	        <li class="ele" draggable="true">7</li>
	        <li class="ele" draggable="true">8</li>
	    </ul>
	<script>
		var node=document.querySelector('#container');
		var dragging=null;
		var prevNext=null;
		var timer=null;
		//使用事件委托
		node.ondragstart=function(event){
			//兼容火狐
			event.dataTransfer.setData('te',event.target.innerText);
			dragging=event.target;
			prevNext=dragging.nextElementSibling;
		}
		node.ondragover=function(event){
			event.preventDefault();
			var target=event.target;
			if(target.nodeName=='LI'&&target!=dragging){
				if (target.animated) {
                    return;
                }
				//添加动画
				//思路：我们可以记录1和2交换之前的位置，然后获取交换之后的位置，然后让元素从原位置慢慢移动到目标位置。
				 clearTimeout(timer)
				 timer=setTimeout(function(){
					var targetRect = target.getBoundingClientRect();
					var dragingRect = dragging.getBoundingClientRect();
					//拖拽排序
					if(_index(dragging)<_index(target)){
	//					console.log(prevNext)
	//					console.log(prevNext)
	//					target.parentNode.insertBefore(target.nextSibling,prevNext);
						target.parentNode.insertBefore(dragging,target.nextSibling);
						target.parentNode.insertBefore(target,prevNext);
					}
					else{
						target.parentNode.insertBefore(dragging,target);
						target.parentNode.insertBefore(target,prevNext);
					}
					//然后在交换位置之后再次获取元素位置
					_animate(targetRect,target);
					_animate(dragingRect,dragging);
				},300)
				
				
			}
		}
		node.ondragend=function(event){
			console.log(1)
		}
		//当前li的index大于容器li时就插入在容器的前面，反之插入在容器的后面
		function _index(el){
			var index=0;
			if(!el||!el.parentNode){
				return -1;
			}
			while(el&&(el=el.previousElementSibling)){
				index++;
			}
			return index;
		}
		//动画方法
		function _animate(preventRect,target){
			var ms=300;
			if(ms){
				var currentRect=target.getBoundingClientRect();
				if(preventRect.nodeType===1){
					preventRect=preventRect.getBoundingClientRect();
				}
				target.style.transition='none';
				target.style.transform='translate3d(' +
				                (preventRect.left - currentRect.left) + 'px,' +
				                (preventRect.top - currentRect.top) + 'px,0)'
            	//触发重绘
            	target.offsetWidth;
            	target.style.transition='all 300ms';
				target.style.transform='translate3d(0,0,0)';
				clearTimeout(target.animated);
	            target.animated = setTimeout(function() {
	                target.style.transition='';
					target.style.transform='';
	                target.animated = false;
	            }, ms);
			}
		}
		
	</script>
	</body>
</html>

niuyueyang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js拖拽排序

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } ul { list-style: no...
复制链接

扫一扫

专栏目录