拖拽交换位置

最新推荐文章于 2024-09-26 10:04:54 发布

M_SSY

最新推荐文章于 2024-09-26 10:04:54 发布

阅读量1.3k

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/M_SSY/article/details/80253601

版权

jQuery 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>拖拽交换位置</title>
		<style type="text/css">
			
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				margin-bottom: 10px;
			}
			li {
				margin: 5px;
				padding: 5px;
				width: 150px;
				border: 1px solid #eaeaea;
				cursor: pointer;
			}
			li:hover{
				box-shadow: 1px 2px 3px #eeeeee;
			}
		</style>
	</head>
	<body>
		<ul>
			<li id="draggable" class="ui-state-highlight">请拖拽我</li>
		</ul>

		<ul id="sortable">
			<li class="ui-state-default">Item 1</li>
			<li class="ui-state-default">Item 2</li>
			<li class="ui-state-default">Item 3</li>
			<li class="ui-state-default">Item 4</li>
			<li class="ui-state-default">Item 5</li>
		</ul>

	</body>

</html>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function() {
		$("#sortable").sortable({
			revert: true
		});
		$("#draggable").draggable({
			connectToSortable: "#sortable",
			helper: "clone",//重复克隆
			revert: "invalid"
		});
		$("ul, li").disableSelection();
	});
</script>

需要引进jQuery-ui.js文件