拖拽排序

最新推荐文章于 2025-06-11 10:05:53 发布

weixin_42537824

最新推荐文章于 2025-06-11 10:05:53 发布

阅读量381

点赞数

CC 4.0 BY-SA版权

文章标签：拖拽排序

本文链接：https://blog.youkuaiyun.com/weixin_42537824/article/details/101518736

本文详细探讨了拖拽排序的实现原理，从事件监听到数据处理，逐一讲解关键步骤。通过实例代码，展示了如何在前端应用中创建可拖拽排序的列表，提升用户体验。同时，讨论了性能优化策略，确保大规模数据下的流畅操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		  <script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
		  <style type="text/css">
		  	ul {
			  list-style: none;
			  padding: 0;
			}

			li {
			  background: #eee;
			  margin: 1px;
			  padding: 5px 10px;
			  cursor: pointer;
			}

			.sortable-ghost {
			  opacity: .6;
			}
			
			
			.wrapper li {
				background: #eee;
				margin: 1px;
				padding: 5px 10px;
				float: left
				}
			
			
			.clearfix::before {
				content:'';
				display:block;
				width: 0;
				clear: both;
				background: red;
				text-align:center;
				line-height:
			}
			
			
		  </style>
	</head>
	<body>
	 <ul id="foo">
		<li>foo 1</li>
		<li>foo 2</li>
		<li>foo 3</li>
		<li>foo 4</li>
		<li>foo 5</li>
		<li>foo 6</li>
		<li>foo 7</li>
		<li>foo 8</li>

	  </ul>
	  <button type="button" id='btn'>提交</button>
	  
	  <ul class="wrapper clearfix"></ul>
	  
	  
	  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	  	<script type="text/javascript">
	  		var arr = [];
	  		Sortable.create(foo, {
	  		  group: 'foo',
	  		  animation: 100,
	  // 		 onEnd:function(e){
	  // 			console.log($("#foo li").html())
	  // 		 }	
	  		});
	  		$('#btn').click(function(){
			   $('#foo li').each(function (index, ele){
				   arr.push($(this).text());
				   
			   })
			   console.log(arr)
	  		})
	  		
	  		
	  		$(function() {
	  			const liArray = [];
	  			const $wrapper = $('.wrapper');
				const wrapper = $wrapper.get(0);
	  			for(i = 0; i < 100; i++) {
	  				const $li = $('<li>');
	  				$li.addClass = 'item';
	  				$li.html(i);
	  				liArray.push($li);
	  			}
	  			$wrapper.append(liArray);
				
				Sortable.create(wrapper, {
					group: 'foo',
				})
				
				
	  		});
			//github 搜索Sortable  地址： https://github.com/SortableJS/Sortable;
	  	</script>
	  
	</body>
	
</html>