原文发布时间为：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. 第二篇：ssh.invoke_shell() 切换root出现的新问题

    接上一篇:按照上一篇的方式,在没有对ssh.invoke_shell()执行后的登录提示符进行判断的话,那边有部分机器就回因为返回为空导致程序卡死. 正常机器  ssh.recv(9999)  命令返 ...

  2. JavaScript方法中this关键字使用注意

    问题来源 本文是基于廖雪峰老师JavaScript课程中的方法一节以及阮一峰老师JavaScript 的 this 原理 所记. 首先,我们了解一下JavaScript中的方法:在一个对象中绑定函数, ...

  3. JZOJ 3461. 【NOIP2013模拟联考5】小麦亩产一千八(kela)

    3461. [NOIP2013模拟联考5]小麦亩产一千八(kela) (Standard IO) Time Limits: 1000 ms  Memory Limits: 262144 KB  Det ...

  4. java一些问题的解答

    1.java 枚举类型和数据二进制等问题思考 以下代码的输出结果是什么?为什么会有这样的输出结果? int X=100; int Y=200; System.out.println("X+Y ...

  5. 初学Python不知道做什么项目好？来看看练手项目如何？

    对于初学者来说,在学习编程的初期,由于基础知识点的学习是比较无聊的,所以大家可能会有所反感,为了减弱大家的反感,我给大家带来一个简单的小项目——实现屏保计时器,这个项目就算是刚学Python的小伙伴, ...

  6. 单片机入门学习笔记6：新唐单片机N76E003

    学习新唐单片机是从2018年3月开始的,之前一点也不懂这一块单片机,之后脉络变的越来越清晰. 由于N76E003档次太低,新塘科技官方的管脚配置,芯片选型……都没有这一块芯片,资料唯独只有:芯片的数据 ...

  7. python函数调用顺序、高阶函数、嵌套函数、闭包详解

    一:函数调用顺序:其他高级语言类似,Python 不允许在函数未声明之前,对其进行引用或者调用错误示范: def foo(): print 'in the foo' bar() foo() 报错: i ...

  8. 使用JFreeChart生成报表

    1.JFreeChart简介    JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications,servlets以及JSP等使用所设计.  ...

  9. Hive UDTF开发指南

    在这篇文章中,我们将深入了解用户定义表函数(UDTF),该函数的实现是通过继承org.apache.Hadoop.hive.ql.udf.generic.GenericUDTF这个抽象通用类,UDTF ...

  10. GIt-恢复进度

    继续暂存区未完成的实践 经过了前面的实践,现在DEMO版本库应该处于master分支上,看看是不是这样. $ cd /path/to/my/workspace/demo $ git status -s ...