首先下载jquery插件
下载地址:http://jqueryui.com/download
直接贴代码了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Display as grid</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.7.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.sortable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#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>
$(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>
接下来就是自己改造sortable.js,mouse.js等这些js以满足自己的要求了...
相关推荐
用JQuery写的拖动元素进行排序的方法，包含拖动排序、拖动移除、拖动添加。 代码完整可用。没有用到第三方插件，自主可控。 原理是用CSS中position定位来跟踪鼠标移动，就是让元素跟踪鼠标位置，然后判断其在页面...
一个应用jQuery插件拖拽的小例子，用于解决拖拽排序问题，拖拽时可以将初始拖拽位置的样式重改，拖拽到指定位置之前，也可以更改指定位置的样式，可以根据需求改变样式。
摘要:脚本资源,Ajax/JavaScript,拖拽排序 可拖拽排序的框架例子，基于jQuery的拖拽排序实例，鼠标按住选定图片拖放至想要的位置松开鼠标，图片即可自动插入到指定位置，原图片会向后对齐。不个我觉得不错的jQuery...
菜单，层拖动，灯箱，多媒体，放大效果，滑动效果，模板，排序器，日历，手风琴，树型，提示对话框，网格，文件上传，选择卡，选择，验证，阴影效果。 及官网一些插件。 包括树(treeselect),Jquery UI等. 另有：...
10个 JQUERY 例子 标签页、表格排序、调整、放大、排序、拖动2例、消息框、选择、折叠效果
php+mysql+js拖拽div实例 代码已改好，放在目录下可直接使用。适合新手学习！
connectWith: ".distination", //多个排序元素间互相拖拽排序 //containment : "#content1", //排序容器，拖拽不能超出容器范围 //cursorAt : { right: 5 }, //拖拽时，元素始终跟随鼠标的位置 { top, left, ...
1.引入文件 ...link rel=stylesheet href=Public/css/jquery-ui.min.css> [removed][removed] 2.给元素附上sortable类 <tr></tr> <tr></tr> 3.开启并配置 $(function() { $(.sortable).sorta
其实是jqueryUI官方购物车拖拽添加例子的增强版，就是在拖拽的时候增加了排序 这个是html代码 代码如下: ”products”> ”ui-widget-header”>Products ”catalog”> <h2><a>T-Shirts</a></h2> <li>Lolcat ...
拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种互动效果： 手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条 (sliders)、表格排序(table sorters)...
XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子 <br>在网络上找到这个东西，感觉很不错，和大家分享下
41.jquery拖动滚动条控制图片滚动及图片放大特效的示例 42.jquery旋转式图片切换并带图片放大功能 43.jQuery漂亮网页右上角双层撕角广告代码 44.jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片...
8.4 综合案例分析—使用jQuery UI插件以拖动方式管理相册/269 8.4.1 需求分析/269 8.4.2 效果界面/269 8.4.3 功能实现/270 8.4.4 代码分析/274 8.5 本章小结/277 第9章 jQuery实用工具函数/278 9.1 什么是...
支持包括子元素的排序和元素在树状结构中的重新定位，不同可排序之间的拖放和拖动时内容滚动； 使用配置选项，您可以定义自己的 HTML 标记； 支持各种回调函数，允许自定义排序时项目的显示方式。 简单用法： $...
很多网站的拖动布局的例子都是采用浏览器的COOKIE来记录用户拖动模块的位置，也就是说拖动后各模块的排序位置信息是记录在客户端的cookie里的。当用户清空客户端的cookie或浏览器的cookie过期后，再次访问页面时，...
内容索引:脚本资源,jQuery,jQuery例子,折叠菜单,Js日历 看到jquery官方网站的例子，却不提供下载，心里痒痒的，后来整理了一些，都是比较完整的，为大家研究jQuery提供方便。这些实例主要有： 基本的鼠标互动...
如jQuery表格排序插件、jQuery表格拖拽插件、jQuery树形表格插件、设置颜色、点击、替换等效果。 1.DataTables-强大的jQuery表格插件 DataTables是提供了大量特性的强大jQuery表格插件。例如:你可以自动轻松筛选、...
基于Jquery Uploadify asp.net无刷新上传文件，带进度条，支持多文件，上G的大文件 例子使用多图片上传，支持上传后的图片拖拽排序（JqueryUI）。
所有效果说明：基本的鼠标互动：拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种互动效果：手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条 (sliders...
JQuery Uploadify 组件。 用多图片做的上传例子。也可以是任意文件，可以限定文件扩展名。 已实现上传后显示图片列表，并可拖拽排序。