jquery-实现拖拽功能

chengyu2099

浏览: 468798 次
性别:
来自: 南京

最近访客更多访客>>

u012363178

zjjsgwm

dyf423

97wgl

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

jQuery Java CSS UI HTML

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>

查看图片附件

分享到：

jquery 鼠标移动，连接提示 | js操作table，实现拖拽，保存顺序思路

2010-09-28 18:17
浏览 1003
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery-实现拖拽功能

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery-实现拖拽功能

评论

发表评论

相关推荐

jquery uploadify

javascript 单元格互换值

json-jquery-struct 解析例子(map) - 批量导入解析和批量导出

弹出窗口 ymPrompt API

jquery tabs 面板

jquery - tags 百度样式的动态提示

jQuery 弹出层

jquery 鼠标移动，连接提示

js操作table，实现拖拽，保存顺序思路

js 验证的样式 有点EXT味道

正则表达式 验证表单 regular

jQuery js 图片轮换显示 缩略图 滚动预览小图的相册

js 滚动图片

showDialog 窗口模式

jQuery Ajax

jQuery获取表单值

js 操作 json

js 选择提示 confirm

JS 提示输入字符数

JS 提示输入字符数

最近访客更多访客>>

js 验证的样式有点EXT味道

正则表达式验证表单 regular

jQuery js 图片轮换显示缩略图滚动预览小图的相册