<!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. Children's Day

    hdu4706:http://acm.hdu.edu.cn/showproblem.php?pid=4706 题意:让你打出3--10的N,这个N是由连续的小写字母组成的. 题解:直接模拟啊,水题啊. ...

  2. 查看SQL Server数据库中各个表和视图的索引所占的空间大小

    ;with cte as ( (select t.name as TableName,i.name as IndexName, sum(row_count)as row_count, SUM (s.u ...

  3. SSH自定义标签

     一.标签处理类:package cn.conris.sys.form; import java.io.IOException; import java.util.Enumeration; impor ...

  4. web版本控制

    说说你在web开发中是怎么进行版本管理的 在web开发中,我首先将系统框架搭建完成后,我会发布到服务器上,然后给小组成员进行分工,为他们划分各自的模块,他们每天早上上班时就从服务器上先将自己机器上面的 ...

  5. js图片预览插件，不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

  6. ResponseHelper

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using Cemetery_ ...

  7. [MIREX] MIREX评测介绍

    MIREX作为国际最权威音频检索评测大赛,竟然在百度上找不到任何介绍,只有几个与什么搜狗.腾讯获得什么成绩相关的检索内容,相比而言,TRECVID的内容收到重视多了...由于研究生阶段主要研究音频领域 ...

  8. Matlab编程-矩阵函数

    (1) are函数 功能:求解Riccati方程的解 Riccati方程的一般形式:A^TX+XA-XBX+C=0 (2)blkdiag函数 函数功能:a=blkdiag(a1,a2,a3,…)表示生 ...

  9. python 3 操作 excel

    看到一篇很好的python读写excel方式的对比文章: 用Python读写Excel文件 关于其他版本的excel,可以通过他提供的链接教程进行学习. XlsxWriter: https://git ...

  10. 408. Valid Word Abbreviation

    感冒之后 睡了2天觉 现在痊愈了 重启刷题进程.. Google的题,E难度.. 比较的方法很多,应该是为后面的题铺垫的. 题不难,做对不容易,edge cases很多,修修改改好多次,写完发现是一坨 ...