• 从零实现一个原生js拖拽排序功能


    源码如下:

    <!DOCTYPE html>
    <html lang="zh">
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    		<meta http-equiv="X-UA-Compatible" content="ie=edge">
    		<title></title>
    		<style>
    			#root {
    			position: relative;
    			 500px;
    			margin: 100px auto;
    			border: 1px solid red;
    		}
    		.item {
    			 100%;
    			position: absolute;
    			left: 0;
    			background-color: rgba(15, 128, 255, 0.4);
    			border-bottom: 1px solid blue;
    			cursor: pointer;
    			display: flex;
    			align-items: center;
    			justify-content: center;
    		}
    	</style>
    	</head>
    	<body>
    		<div id="root"></div>
    		<script type="text/javascript">
    			// 参数
    			const data = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']
    			const height = 50;
    
    			// 初始化变量
    			let children = []
    			let target = null;
    			let moveTop = 0;
    			let targetNum = 0;
    
    			// 渲染元素
    			const root = document.querySelector('#root')
    			root.style.height = data.length * height + 'px';
    			for (let i = 0, len = data.length; i < len; i++) {
    				const item = data[i]
    				const div = document.createElement('div')
    				div.className = 'item'
    				div.innerText = item
    				div.style.top = i * height + 'px'
    				div.style.height = height + 'px'
    				drag(div)
    				children.push(div)
    				root.appendChild(div)
    			}
    
    			// 拖拽
    			function drag(div) {
    				div.onmousedown = function(e) {
    					const top = e.clientY - div.offsetTop;
    					target = div;
    					targetNum = Math.round(div.offsetTop / height)
    					document.onmousemove = function(e) {
    						moveTop = e.clientY - top;
    						target.style.top = moveTop + 'px'
    						move()
    					}
    				}
    			}
    
    			// 鼠标松开设置最终落下位置
    			document.onmouseup = function() {
    				document.onmousemove = null;
    				if (!target) return null;
    				const nowNum = Math.round(moveTop / height)
    				if (nowNum >= (children.length - 1)) {
    					target.style.top = (children.length - 1) * height + 'px';
    				} else if (nowNum <= 0) {
    					target.style.top = '0px';
    				} else {
    					target.style.top = nowNum * height + 'px';
    				}
    			}
    
    			// 交换位置
    			function move() {
    				const nowNum = Math.round(moveTop / height)
    				for (let i = 0, len = children.length; i < len; i++) {
    					const item = children[i];
    					if (target === item) {
    						continue;
    					}
    					const itemNum = parseInt(item.style.top) / height;
    					if (itemNum === nowNum) {
    						if (itemNum < targetNum) {
    							item.style.top = (parseInt(item.style.top) + height) + 'px';
    						} else if (itemNum > targetNum) {
    							item.style.top = (parseInt(item.style.top) - height) + 'px';
    						}
    						targetNum = Math.round(moveTop / height);
    						return null;
    					}
    				}
    			}
    		</script>
    	</body>
    </html>
    
    
  • 相关阅读:
    离屏渲染说明文章地址
    苹果文档文章查看地址
    仿照GPUImageMovieOutput写的只支持BGRA32的视频Buffer读取
    拍照摄像拉近摄像头
    消除nonnull警告
    人体姿态识别
    AR资讯文章
    获取图片中对象轮廓并替换白色
    jar包和war包的介绍和区别(转载)
    css美化Div边框的样式实例*(转载)
  • 原文地址:https://www.cnblogs.com/liea/p/13277048.html
Copyright © 2020-2023  润新知