Jquery UI sortable.html

最新推荐文章于 2025-06-03 09:12:09 发布

iteye_2179

最新推荐文章于 2025-06-03 09:12:09 发布

阅读量132

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签： ui javascript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_2179/article/details/82168605

JQuery 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何使用 jQuery UI 的 draggable 和 sortable 插件实现元素的拖拽与排序功能，包括插件的引入、基本用法及注意事项。

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable + Sortable</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.6.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.sortable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
.demo li { margin: 5px; padding: 5px; width: 150px; }
</style>
<script>
$(function() {
  $( "#sortable" ).sortable({
   revert: true
  });
  $( "#draggable" ).draggable({
   connectToSortable: "#sortable",
   helper: "clone",
   revert: "invalid"
  });
  $( "ul, li" ).disableSelection();
});
</script>
</head>
<body>