<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Sortable - Drop placeholder</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
  html>body #sortable li { height: 1.5em; line-height: 1.2em; }
  .ui-state-highlight { height: 1.5em; line-height: 1.2em; }
  </style>
  <script>
  $(function() {
    $( "#sortable" ).sortable({
      placeholder: "ui-state-highlight"
    });
    $( "#sortable" ).disableSelection();
  });
  </script>
</head>
<body>
 
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
  <li class="ui-state-default">Item 6</li>
  <li class="ui-state-default">Item 7</li>
</ul>
 
 
</body>
</html>

详细参考网址:http://jqueryui.com/

jquery ui 插件------------------------->sortable的更多相关文章

  1. jQuery学习笔记（jquery.ui插件）

    官网地址:http://ui.jquery.com/ jQuery UI源自于一jQuery插件-Interface.目前版本是1.10.3,需要jQuery 1.6以上版本支持. jQuery UI ...

  2. jQuery UI Draggable + Sortable 结合使用

    工作中需要将一个左边的设计好的控件,拖拽到右边的面板中,同时保持右边面板中的控件自由排序,这时候就需要及支持拖拽又支持排序的操作了, Demo截图:从左边控件拖到右边区域 代码段: <scrip ...

  3. 在Eclipse ee中成功使用jQuery UI插件

    关键代码截图如下:

  4. 三、jQuery--jQuery基础--jQuery基础课程--第10章 jQuery UI型插件

    1.拖曳插件——draggable 拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格 ...

  5. jQuery基础（常用插件 表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）

    1.表单验证插件——validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:   $(form).validate({o ...

  6. 使用 jQuery UI Widget Factory 编写有状态的插件（Stateful Plugins）

    使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins) Note 这一章节的内容是基于 Scott Gonzalez 一篇博客 Building ...

  7. jquery UI 跟随学习笔记——拖拽（Draggable）

    引言 这周暂时没有任务下达,所以老大给我的任务就是熟悉jquery相关插件,我就先选择了jquery UI插件,以及jquery库学习. 我用了两天的时候熟悉Interactions模块中的Dragg ...

  8. jQuery常用插件

    jQuery UI插件简介: jQuery UI是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具 ...

  9. 使用Jquery UI 高仿百度搜索下拉列表功能

    最近项目有个需求,在新添加商户的时候,用户输入商户名称后,如果系统中有类似的商户名称,直接显示出来,如下图的效果: 实现这个功能,直接使用了JQuery UI 插件 目前我使用的实现版本是: 网友可以 ...

随机推荐

  1. Ubuntu下su:authentication failure的解决办法

    $ su - rootPassword: su: Authentication failureSorry. 这时候输入 $ sudo passwd rootEnter new UNIX passwor ...

  2. Class.forName()的理解

    转自:http://blog.csdn.net/yanwushu/article/details/7574713 使用jdbc方式连接数据库时会使用一句代码Class.forName(String c ...

  3. _CrtSetBreakAlloc简单内存泄漏检测方法，解决Detected memory leaks!问题

    我的环境是: XP SP2 . VS2003 最近在一个项目中,程序退出后都出现内存泄漏: Detected memory leaks! Dumping objects -> {98500} n ...

  4. bzoj2809

    可以先穷举那个是管理者,然后就发现其实就是求每个子树选尽可能多的人,使薪水和小于m这显然是从小往大选,可以用启发式合并但是用主席树写的更简单一点吧,dfs序之后每课线段树不仅维护出现出现个数,然后在维 ...

  5. BZOJ1465: 糖果传递

    1465: 糖果传递 Time Limit: 2 Sec  Memory Limit: 64 MBSubmit: 277  Solved: 105[Submit][Status] Descriptio ...

  6. Delphi Webservice 杂谈

    用WebService来实现B2B集成的最大好处在于可以轻易实现互操作性 WebService可用基于XML的SOAP来表示数据和调用请求,并且通过HTTP协议来传输这些XML格式的数据,因为此时的调 ...

  7. MRTG开源监控安装手册

    环境要求: CentOS6以上版本 2G内存 16G存储 源码包下载:第一部分:下载,第二部分:下载 1.安装snmp: yum install -y net-snmp net-snmp-devel ...

  8. php写excel

    $this->loadexcel();        $objPHPExcel = new PHPExcel();        $objPHPExcel->getProperties() ...

  9. [原]ubuntu下制作openstack-havana源

    ubuntu下可以用apt-mirror下载openstack的源: 1.安装apt-mirror: apt-get install apt-mirror 2.配置/etc/apt/mirror.li ...

  10. awk替换第几行第几列的值

    代码如下: awk '{if(2==NR){gsub(/.*/, 300, $5)}print}' list.txt 将文件list.txt的第2行第5列的值替换为300