`
chengyu2099
  • 浏览: 471204 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

jquery-实现拖拽功能

阅读更多
jqueryui.com - demo - sorttable

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>jQuery UI Sortable - Display as grid</title>
	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<style type="text/css">
	#sortable { list-style-type: none; margin: 0; padding: 0; }
	#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
	</style>
	<script type="text/javascript">
	$(function() {
		$("#sortable").sortable();
		$("#sortable").disableSelection();
	});
	</script>
</head>
<body>
<div class="demo">
 
<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>
 
</div><!-- End demo -->
 
<div class="demo-description">
 
<p>
	To arrange sortable items as a grid, give them identical dimensions and
	float them using CSS.
</p>
 
</div><!-- End demo-description -->
 
</body>
</html>

  • 大小: 66.4 KB
分享到:
评论

相关推荐

    jquery-ui.css、jquery-ui.js下载

    jQuery UI是基于JavaScript库jQuery的一个扩展,它提供了一系列丰富的用户界面组件,包括但不限于对话框(Dialogs)、日期选择器(Datepickers)、拖放功能(Drag and Drop)、排序功能(Sortable)以及各种可自定义...

    jquery-ui-1.8.2.custom.min.js,jquery-ui-1.8.4.custom.css

    通过简单的API调用,开发者可以轻松地实现复杂的用户界面功能,而无需从头编写大量代码。例如,只需要几行JavaScript,就可以创建一个具有动画效果的对话框,或者使元素变得可拖动。此外,jQuery UI还支持主题Roller...

    jQuery-UI和jsPlumb实现拖拽连接模型demo下载

    在实现拖拽连接模型的过程中,我们需要监听jQuery-UI的`stop`事件,当拖放操作结束时,根据当前元素的位置和jsPlumb的端点规则创建新的连接。同时,jsPlumb的连接事件也可以用来更新拖放后的连接状态。通过结合两者...

    jQuery-file-upload的各种语言拖拽上传文件功能

    实现拖拽上传的关键在于监听`drop`事件,jQuery-file-upload会自动处理这些事件,将拖放的文件添加到上传队列。 四、基本使用步骤 1. 引入依赖:首先需要引入jQuery库以及jQuery-file-upload的JavaScript和CSS文件...

    jquery-ui-1.7.3.custom 完整开发包

    使用 jQuery UI 的优势在于它与 jQuery 框架的深度集成,可以轻松地与其他 jQuery 功能配合,实现复杂的交互效果。同时,它的组件化设计使得代码组织清晰,易于维护。通过定制主题,可以轻松地让网站或应用与品牌...

    jquery-resizable-columns

    通过"jquery-resizable-columns",开发者可以轻松地为项目添加类似Excel的列宽可拖动功能,提升网页的交互性和用户体验。理解并熟练运用这个插件,对于构建高效、灵活的数据展示界面具有重要意义。

    jquery-ui-1.11.4完整版

    2. 对话框(Dialog):用于创建弹出窗口,支持多种打开方式、关闭按钮、拖动等功能,常用于提示、确认或输入信息。 3. 拖放功能(Draggable & Droppable):实现元素的拖放操作,广泛应用于布局调整、排序等场景。 4...

    jquery-ui-1.8.18.custom,jquery-ui-1.8.18.custom.min,jquery-1.7.1.min

    1. **拖放功能 (Draggable)**:允许用户将元素拖动到不同的位置,常用于创建可移动的面板或小部件。 2. **可排序 (Sortable)**:使列表或网格中的元素可以重新排序,常见于待办事项列表或目录排序。 3. **对话框 ...

    jquery-ui-1.8.6 js库

    jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它为开发者提供了丰富的功能和华丽的样式,帮助构建具有高度交互性的网页应用。这个版本,即 jQuery UI 1.8.6,包含了各种组件和特效,为网页设计和...

    jquery-ui-1.8.18.custom

    - **Draggable**:允许用户通过鼠标拖动元素,常用于实现可移动的窗口或部件。 - **Sortable**:使列表项可以进行拖放排序,适用于列表、表格和网格布局。 - **Resizable**:允许用户调整元素的大小,常见于图片...

    jquery-ui-1.7.1.zip

    总的来说,jQuery UI 1.7.1 是一个强大的工具集,可以帮助开发者快速实现丰富的用户界面和交互效果。通过掌握并熟练使用其中的组件,我们可以极大地提升网页的用户体验,同时降低开发复杂度。无论是在企业级应用还是...

    jquery-1.11.0+jquery-UI-1.10.4

    再比如,使用jQuery的动画效果和jQuery UI的拖放功能,可以实现自定义的拖拽排序列表,使用户能够自由调整元素顺序。 在实际项目中,为了充分利用这两个库,开发者需要了解它们的API文档,学习如何结合使用选择器、...

    关于jQuery-Ui的引用文件

    使元素具有拖动功能,常用于创建可移动的组件。示例代码: ```html &lt;div id="draggable" class="ui-widget-content"&gt; 我可以被拖动 ``` ```javascript $("#draggable").draggable(); ``` #### 3.4 可排序...

    jquery-ui-1.10.4

    在本篇文章中,我们将深入探讨jQuery UI 1.10.4版本的核心特性、功能及其在实际开发中的应用。 一、jQuery UI概述 jQuery UI 是一个开源项目,旨在简化Web应用程序的前端开发。它包括了拖放、日期选择器、对话框、...

Global site tag (gtag.js) - Google Analytics