兼容ie7的列表拖拽+排序（jqueryUI）

最新推荐文章于 2023-01-16 10:32:13 发布

fiona-frontEnd

最新推荐文章于 2023-01-16 10:32:13 发布

阅读量324

点赞数

分类专栏：兼容性

本文链接：https://blog.csdn.net/DeliaWen/article/details/103493440

版权

兼容性专栏收录该内容

2 篇文章 0 订阅

订阅专栏

参考：

官网：添加链接描述
相关配置参数：添加链接描述

代码：

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>jQuery UI Draggable + Sortable</title>
		<link rel="stylesheet" href="/resources/demos/style.css">
		<style>
			.cols-list{
				width: 700px;
				list-style-type: none;
				margin: 0;
				padding: 0;
				margin-bottom: 10px;
				min-height: 50px;
				background: #e0eefb;
				padding: 10px 0;
			}
			
			li {
				width: 95%;
				margin: 5px;
				padding: 5px;
				cursor: move;
				border: 1px solid #ccc;
				background: #fff;
			}

		</style>
		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
		<script>
			$(function() {
				$(".cols-list").sortable({
					axis: 'y', //限制移动的方向
					items: ".col", //指定移动的元素
					connectWith: '.cols-list' //指定在哪些区域内移动
				});
			});
		</script>
	</head>
	<body>
		<ul class="cols-list">
			<li class="col">Item 1</li>
			<li class="col">Item 2</li>
			<li class="col">Item 3</li>
			<li class="col">Item 4</li>
			<li class="col">Item 5</li>
		</ul>
		<ul class="cols-list">
	
		</ul>
	</body>

</html>