<!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>
<div class="demo">
<ul>
<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<ul id="sortable">
<li class="ui-state-default"><div> Item 1 </div></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>
</div><!-- End demo -->
<div class="demo-description">
<p>Draggables are built to interact seamlessly with <a href="#">sortables</a>.</p>
</div><!-- End demo-description -->
</body>
</html>
分享到：
相关推荐
在实际应用中，你需要将`jquery-ui.js`和`jquery-ui.css`链接到HTML文档中，确保在引入jQuery库之后引入它们。同时，为了优化加载速度，可以考虑使用CDN服务或者对库进行压缩合并，减少HTTP请求。 总的来说，jQuery...
在最新版本中，包括了`jquery.fn.sortable.js`和其压缩版`jquery.fn.sortable.min.js`，以及可能的替代版本`jquery.sortable.js`和`jquery.sortable.min.js`。这个插件主要适用于需要用户交互式调整元素顺序的场景，...
这个文件包含了jQuery UI的所有核心组件，如对话框（Dialog）、拖放（Draggable）、可排序（Sortable）、可折叠（Accordion）、时间选择器（Datepicker）等，以及众多动画效果和实用工具函数。由于进行了压缩，代码...
首先，jQuery Sortable是jQuery UI库的一部分，提供了丰富的拖放排序功能。要使用这个插件，你需要先在项目中引入jQuery和jQuery UI的库文件。通常，这包括引入以下两行代码： ```html <script src="https://code....
jqueryUI拖拽排序插件,单独的插件,可以独立使用!不必引入整个jqueryUi框架就可使用
jquery.ui.min~draggble~droppable~sortable.js draggble~droppable~sortable 这三个都是难找的资源 界面拖拽或智能选择功能必备插件 一次性放出来...
jquery ui sortable 结合jquery ui.core使用
《jQuery UI库与jQuery基础详解》 jQuery UI是基于JavaScript库jQuery的一款强大的用户界面库，它为开发者提供了丰富的交互效果和可自定义的主题，使得网页的界面设计更加生动且易于操作。标题中的"jquery-ui.js"是...
ul class="sortable"> li>Item 1 li>Item 2 li>Item 3 li>Item 4 ul> script src="jquery.sortable.js">script> script> $('.sortable').sortable(); script> API 兼容 jQuery-UI： yepnope({ ...
jQuery UI提供了多种可复用的UI组件，如对话框（Dialog）、日期选择器（Datepicker）、拖放功能（Draggable）、可排序列表（Sortable）和滑块（Slider）等。这些组件极大地简化了开发工作，让开发者可以专注于业务...
**jQueryUI组件详解** jQueryUI 是一个基于jQuery库的扩展，它提供了一整套用户界面组件，如对话框、滑块、进度条、日期选择器等，极大地简化了网页交互和用户界面的设计。这个下载包包含了jQueryUI的核心组件以及...
这个文件包含了各种UI组件的实现，如对话框（Dialog）、滑块（Slider）、日期选择器（Datepicker）、拖放功能（Draggable）、可排序元素（Sortable）以及许多其他交互元素。 `jquery-ui-1.8.16.custom.css` 文件则...
《jQuery UI 1.8.18 自定义插件与CSS详解》 jQuery UI 是一个基于 jQuery 库的用户界面库，它提供了丰富的交互效果、可定制的主题以及各种UI组件，如日期选择器、对话框、滑块等。在本篇文章中，我们将深入探讨其...
1. 对话框（Dialogs）：jQuery UI的对话框组件可以将任何HTML元素转化为一个模态或非模态的对话框，用于显示警告、确认或者提供更多信息。它们可以自定义大小、位置、按钮和关闭选项，提供了一种优雅的方式来与用户...
首先，jQuery UI 1.12.1 是一个稳定且广泛使用的版本，它包含了众多组件，如日期选择器（Datepicker）、对话框（Dialog）、拖放（Draggable）、可排序（Sortable）和可堆叠（Stackable）等。这些组件极大地提高了...
通过访问在线工具（如 http://jqueryui.com/themeroller/），可以选择颜色、字体、边框等样式，生成定制的主题 CSS 文件。下载后，替换默认的 `jquery-ui.min.css` 文件，即可实现整个 UI 的风格统一。 ### 3. 常见...
jQuery UI是基于jQuery的用户界面库，包含一组可复用的组件，如对话框（Dialog）、日历（Datepicker）、拖放（Draggable）、可排序（Sortable）和效果（Effects）。在本案例中，虽然只提及了`jQuery-UI-Reference-...
将 "jquery-ui-1.9.2.custom.min.js" 引入到HTML文件中，通常会放在`<head>`标签内或`</body>`标签前，确保在引用依赖它的任何JavaScript代码之前加载。同时，由于这是一个定制版本，开发者需要确保所使用的UI组件...
1.8.2是这个版本的发布编号，表示它是在2010年左右发布的，当时jQuery UI已经包含了大量的组件，如对话框（Dialog）、拖放（Draggable）、可排序（Sortable）、日期选择器（Datepicker）等。 接下来，`jquery-ui-...
特征您可以模拟在可排序列表中由指定数量的项目向上或向下拖动的项目支持拖动手柄支持占位符支持将列表限制为与选择器匹配的项目已知限制当前不适用于链接列表不支持水平排列的列表...，包括jquery.simulate.drag...