每日小技巧

        元素拖拽排序，每日一小练。（学习：渡一Web前端学习）

 HTML部分：

<!-- 标题 -->
		<div class="title">
			<h1>每日一练————拖拽排序</h1>
		</div>
		<!-- 内容 -->
		<div class="main">
			<div class="list" draggable="true">1</div>
			<div class="list" draggable="true">2</div>
			<div class="list" draggable="true">3</div>
			<div class="list" draggable="true">4</div>
			<div class="list" draggable="true">5</div>
		</div>

		<!-- 菜单 -->
		<div class="menu">
			<button type="button" onclick="btn(true)">正方形</button>
			<button type="button" onclick="btn(false)">长方形</button>
		</div>

JS部分：

//事件委托
			//获取元素
			const list = document.querySelector('.main');
			let sourceNode; //当前拖动的元素
			// console.log(list);

			//开始拖动元素时执行
			list.ondragstart = (e) => {
				// console.log(e.target);
				setTimeout(() => {
					e.target.classList.add('moving'); //添加元素样式
				}, 0)
				sourceNode = e.target;
			}

			//在拖动的元素进入到放置目标时执行
			list.ondragenter = (e) => {
				e.preventDefault(); //阻止默认行为
				//拖动到，自己或者父级元素，除外
				if (e.target === list || e.target === sourceNode) return;
				// console.log(e.target);
				//获取全部元素，转换为数组
				const listchildren = Array.from(list.children);
				const sourceIndex = listchildren.indexOf(sourceNode); //拖动元素下标
				const targetIndex = listchildren.indexOf(e.target); //目标元素下标
				// console.log(sourceIndex,targetIndex);
				//判断拖动元素的位置
				if (sourceIndex < targetIndex) {
					console.log('向下');
					//insertBefore（）方法在被选元素前插入 HTML 元素
					list.insertBefore(sourceNode, e.target.NextElementSibling); //NextElementSibling 兄弟元素下一个元素
				} else {
					console.log('向上');
					list.insertBefore(sourceNode, e.target);
				}
			}

			//拖动元素完成时执行
			list.ondragend = (e) => {
				e.target.classList.remove('moving'); //清除元素样式
			}

			//当某被拖动的对象在另一对象容器范围内拖动时触发此事件
			list.ondragover = (e) => {
				e.preventDefault(); //阻止默认行为
			}


			// 菜单
			function btn(value) {
				//获取全部元素，转换为数组
				const listchildren = Array.from(list.children);
				if(value){
					list.classList.add('mainbut2')
					list.classList.remove('mainbut1')
					listchildren.forEach((d,i)=>{
						d.classList.add('but3')
						d.classList.remove('but4')
					})
				}else{
					list.classList.add('mainbut1')
					list.classList.remove('mainbut2')
					listchildren.forEach((d,i)=>{
						d.classList.add('but4')
						d.classList.remove('but3')
					})
				}
				
			}

css部分：

* {
				margin: 0;
				padding: 0;
			}

			/* 标题 */
			.title {
				width: 100%;
				height: 100px;
				background-color: #ffffff;
				box-shadow: 0px 0px 2px 2px #fff;
				position: fixed;

				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			/* 内容 */
			.main {
				width: 100%;
				height: 100vh;
				background-color: #eee;
			
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			.main .list {
				width: 600px;
				height: 50px;

				margin-bottom: 10px;
				margin-right: 10px;
				border-radius: 5px;
				background-color: #55aa00;

				color: #ffffff;
				line-height: 50px;
				text-indent: 1rem;
			}

			/* 动作 */
			.main .moving {
				background: transparent;
				color: transparent;
				border: 1px dashed #ccc;
			}

			/* 菜单操作 */
			.mainbut1 {
				flex-direction: column;
			}

			.mainbut2 {
				flex-direction: row;
			}

			.main .but3 {
				width: 100px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				text-indent: 0;
			}

			.main .but4 {
				width: 600px;
				height: 50px;
				line-height: 50px;
				text-align: none;
				text-indent: 2rem;
			}

			/* 菜单 */
			.menu {
				width: 100%;
				height: 50px;
				bottom: 0;
				box-shadow: 0px 0px 2px 2px #fff;
				position: fixed;
				background-color: #ffffff;

				display: flex;
				justify-content: flex-end;
				align-items: center;
			}

			.menu button {
				width: 80px;
				height: 30px;

				margin: 10px;
				border: none;
				color: #FFF;
				border-radius: 5px;
				background-color: #55aa00;
			}