原文发布时间为：2010-04-11 —— 来源于本人的百度文章 [由搬家工具导入]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Sortable - Default functionality</title>
<link type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src=">
<script type="text/javascript" src=">
<script type="text/javascript" src=">
<script type="text/javascript" src=">
<script type="text/javascript" src=">
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script type="text/javascript">
$(function() {
   $("#sortable").sortable();
   $("#sortable").disableSelection();
});
</script>
</head>
<body>
<div class="demo">

<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

</div><!-- End demo -->

<div class="demo-description">

<p>
Enable a group of DOM elements to be sortable. Click on and drag an
element to a new spot within the list, and the other items will adjust to
fit. By default, sortable items share <code>draggable</code> properties.
</p>

</div><!-- End demo-description -->

</body>
</html>

jQuery 拖动排序的更多相关文章

  1. 针对后台列表table拖拽比较实用的jquery拖动排序

    <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8&qu ...

  2. jquery 鼠标拖动排序Li或Table

    1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Ta ...

  3. 锋利的jQuery-7--query ui效果库--拖动排序插件sortable

    一个简单的拖动排序效果,具体请参看jQuery ui官网demo. jquery ui :http://jqueryui.com/ sortable例子:http://jqueryui.com/sor ...

  4. sortable结合angularjs实现拖动排序

    记录拖动排序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  5. 基于Metronic的Bootstrap开发框架经验总结（13）--页面链接收藏夹功能的实现2（利用Sortable进行拖动排序）

    在上篇随笔<基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现>上,我介绍了链接收藏夹功能的实现,以及对收藏记录的排序处理.该篇随笔主要使用功能按 ...

  6. jQuery拖动剪裁图片作为头像

    图片上传是许多网站的一个常用的功能,有时需要对上传的图片做初步的选择裁剪,比如上传头像.下面就是一个使用HTML5+jQuery实现的图片上传裁剪特效,可以对选择要上传的图片做缩小.放大.拖动和裁剪, ...

  7. jQuery 表格排序插件 Tablesorter 使用

    jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.m ...

  8. JQuery 拖动层

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  9. android可拖动排序GridView实现

    经常使用今日头条.网易新闻的同学们应该都会注意到用于管理多个频道的可拖动排序GridView,下面介绍一下可拖动的DragGridView的实现方法.代码放在GitHub上https://github ...

随机推荐

  1. git提交时报错 permission denied

    git push 时报错:permission denied xxx 目前很多解决办法是生成公钥和秘钥,这种方法安全可靠,比较适用于一台电脑对应一个git账户,但是多个账户在同一台电脑上提交使用git ...

  2. Linux-SSH远程登陆

    SSH是什么 Secure Shell 安全外壳协议 建立在应用层基础上的安全协议 可靠.转为远程登陆会话和其他网络提供安全性的协议 SSH客户端是用于多种平台 服务器安装SSH服务 安装:yum i ...

  3. php订单号的生成

    来自ECSHOP订单号生成函数:/includes/lib_order.php文件中的get_order_sn() /** * 得到新订单号 * @return string */ function ...

  4. 课时5.什么是URL（理解）

    其实浏览器的地址栏中输入的地址就是一个URL. http://127.0.0.1/index.html(浏览器会自动添加:80) http://127.0.0.1:80/index.html(这是浏览 ...

  5. linux下mysql的权限设计总结

    1,进入mysql,终端中输入 mysql -u 用户名 -p   .enter键后,提示输入密码. 2,执行grant all privileges on xxxdb.* to usertest@& ...

  6. 笔记-python-standard library-8.5.heapq

    笔记-python-standard library-8.5.heapq 1. heapq-heap queue algorithm源码:Lib/heapq.pythis module provide ...

  7. Diycode开源项目 ImageActivity分析

    1.首先看一下效果 1.1做成了一个GIF 1.2.我用格式工厂有点问题,大小无法调到手机这样的大小,目前还没有解决方案. 1.3.网上有免费的MP4->GIF,参考一下这个网站吧. 1.4.讲 ...

  8. OpenStack之各组件介绍

    OpenStack简介 OpenStack既是一个社区,也是一个项目和一个开源软件,它提供了一个部署云的操作平台或工具集.其宗旨在于:帮助组织运行为虚拟计算或存储服务的云,为公有云.私有云,也为大云. ...

  9. Python-S9-Day122-Python爬虫

    11 初识爬虫 11 初识爬虫 12 今日作业 11.1 初识黄页: 11.2 互联网就是一张大的蜘蛛网: 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种 ...

  10. php字符串 函数

    strtolower()//字符串转化小写的字母 $str="abcdEfG";$s=strtolower($str); 输出:abcdefg; strtoupper();字符串转 ...