jqueryui 拖动div页面布局示例－－－表格可拖动示例
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Display as grid</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>
</body>
</html>
参考官方网站：http://jqueryui.com/sortable/#display-grid
分享到：
相关推荐
本篇文章将深入讲解如何使用jQuery UI Drag插件来创建可拖动的浮动div，并将其应用于布局排列，以及如何将排序结果保存到数据库。 **1. jQuery UI Drag插件介绍** jQuery UI是基于jQuery库的一个扩展，它提供了...
首先，我们要理解“JqueryUI 控制可拖动隐藏 DIV”这一概念。在 jQuery UI 中，`draggable()` 方法用于使元素变得可拖动，用户可以通过鼠标点击并移动来改变元素的位置。而 `hide()` 和 `show()` 方法则分别用于隐藏...
使用jQuery UI的拖拽功能，开发者首先需要在页面中引入jQuery和jQuery UI的库。接着，通过`draggable()`方法将特定的DOM元素设置为可拖动，如下所示： ```html <!DOCTYPE html> <link rel="stylesheet" href="...
**jQuery UI 拖拽信息到Table表格特效详解** 在网页开发中，用户交互体验是至关重要的，而jQuery UI库提供了丰富的组件和效果，其中拖放功能（Drag and Drop）可以显著提升用户的操作便捷性。本篇文章将详细介绍...
总的来说，使用jQuery UI创建自定义布局是一项强大而灵活的任务，它可以满足各种复杂的页面布局需求。通过熟练掌握Resizable和Draggable组件，以及适当的HTML和CSS结构，我们可以创造出高度交互且用户友好的Web界面...
这个压缩包"jquery-ui-1.9m6"包含了jQuery UI的1.9m6版本，不仅有完整的JS库，还有相应的示例（demo），为开发者提供了便捷的学习和应用资源。 首先，我们来深入了解jQuery UI的核心组件： 1. **对话框（Dialog）*...
- **示例1：基本portlet布局**：此示例展示了最基础的portlet排列，每个portlet都有标题、内容和操作按钮，用户可以拖动portlet改变位置。 - **示例2：可折叠portlet**：在此示例中，portlet可以被折叠成标题栏，...
在描述中提到的场景中，`div`元素不仅可以在页面上任意位置拖动，还能被放置到一个表格（`<table>`）的`tbody`部分，并在`td`单元格之间自由移动。为了实现这种复杂行为，我们需要对`draggable`进行一些高级配置。...
jQuery UI 示例代码 ```html <!DOCTYPE html> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery....
这个“实用的jQueryUI例子”压缩包包含了一些常见的UI组件的示例代码，方便开发者快速理解和应用到自己的项目中。** 首先，让我们深入了解一下jQuery UI中的核心组件： 1. **日历（Datepicker）**: 这是jQuery UI...
在"jqueryui demo"中，我们可以看到官方提供的各种示例，这些示例涵盖了jQuery UI的主要功能。 ### 一、jQuery UI 主要组件 1. **对话框（Dialog）** 对话框是网页中的弹出窗口，常用于提示信息、确认操作或显示...
本文将详细介绍JQ UI中的拖拽功能，以及如何实现一个兼容性高的拖拽DIV插件。 首先，让我们了解JQ UI的拖拽功能。在JQ UI中，`draggable()` 是一个核心方法，用于将元素变为可拖动的。通过调用此方法并传入相应的...
在这个“jQuery UI拖拽信息到Table表格特效”示例中，我们主要关注的是如何使用 jQuery UI 的拖放功能来实现动态地将数据拖放到表格中。 首先，`index.html` 是项目的主页面文件，它包含了必要的 HTML 结构。在 ...
标题中的“鼠标拖动divjquery-ui-1.11.0.rar”指的是一个使用jQuery UI库实现的鼠标拖动功能的示例项目。这个压缩包包含了一个基于jQuery UI 1.11.0版本的代码资源，允许用户通过鼠标拖动HTML元素，如div，以实现...
在本文中，我们将深入探讨如何使用jQuery UI库来实现一个独特的功能：通过拖动滑块控制图片滚动。这种效果在网页设计中可以增加互动性和用户体验，尤其适用于展示一系列图像或创建动态相册。jQuery UI是一个强大的...
<title>jQuery 拖动编辑div示例 <link rel="stylesheet" href="jquery-ui-personalized-1.6rc2.min.css"> <div id="draggable" class="ui-widget-content"> <!-- 这里放置div内容 --> </div> ...
"jQuery窗体拖动布局"技术就是这种体验的一种体现，它允许用户通过简单的鼠标拖动操作来调整页面上各个窗体的位置，以满足个性化的需求。jQuery，作为一款强大的JavaScript库，提供了丰富的功能和简便的API，使得...
**jQuery UI 知识点详解** jQuery UI 是一个基于 jQuery 库的开源用户界面库，它提供了丰富的交互组件和设计模式，使得开发者可以快速构建功能齐全、具有良好用户体验的Web应用程序。这个笔记主要涵盖jQuery UI的...
这份"jQuery.ui.1.7.2中文文档"为开发者提供了详尽的API参考和示例代码，是学习和应用jQuery UI的重要资源。通过阅读文档，理解每个组件的工作原理和使用方式，结合实际项目进行练习，你将能熟练掌握这个强大的工具...
在给定的标题“jquery拖拽排序插件div自由拖动排序代码”中，我们主要讨论的是如何利用jQuery实现一个功能，让用户能够自由地通过拖放操作来对页面上的div元素进行排序。这种功能在许多应用场景中都非常实用，比如...