在编写网页的时候,有时可能需要对ul的li进行排序,今天就给大家推荐使用jquery插件jquery list dragsort实现列表拖动排序效果。

效果如图:

jquery list dragsort列表拖动插件使用方法

$("ul").dragsort({
    dragSelector: "li",
    dragEnd: function() { },
    dragBetween: false,
    placeHolderTemplate: "<li></li>"
});

jquery list dragsort列表拖动插件参数说明

dragSelector

CSS选择器内的元素的列表项的拖动手柄。默认值是“li”。

dragSelectorExclude

CSS选择器的元素内的dragSelector不会触发dragsort的。默认值是”input, textarea, a[href]”。

dragEnd

拖动结束后将被调用的回调函数.

dragBetween

设置为“true”,如果你要启用多组列表之间拖动选定的列表。 默认值是false。

placeHolderTemplate

拖动列表的HTML部分。默认值是”<li></li>”.

scrollContainer

CSS选择器的元素,作为滚动容器,例如溢出的div设置为自动。 默认值是“窗口“.

scrollSpeed

一个数字,它代表了速度,页面拖动某一项时,将滚动容器外,较高使用价值的是速度和较低的值是较慢的。 如果设置为”0″以禁用滚动。默认值是”5″.

jQuery列表拖动排列-jquery list dragsort插件参数和使用方法的更多相关文章

  1. 【转】jQuery列表拖动排列-jquery list dragsort插件参数和使用方法

    转自:http://www.itokit.com/2014/0820/75058.html 我们在编辑页面元素排序的时候,我推荐使用jquery插件:dragsort. dragsort官网地址:ht ...

  2. 最好用的jquery列表拖动排列(由项目提取)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wuchengzeng/article/details/31766235 最好的jquery列表拖动排 ...

  3. jQuery手机触屏拖动滑块验证跳转插件

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...

  4. 基于JQuery可拖动列表格插件DataTables的踩坑记

    前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...

  5. The ultimate jQuery Plugin List(终极jQuery插件列表)

    下面的文章可能出自一位奥地利的作者,  列出很多jQuery的插件.类似的网站:http://jquerylist.com/原文地址: http://www.kollermedia.at/archiv ...

  6. jQuery实现拖动布局并将排序结果保存到数据库

    很多网站的拖动布局的例子都是采用浏览器的COOKIE来记录用户拖动模块的位置,也就是说拖动后各模块的排序位置信息是记录在客户端的cookie里的.当用户清空客户端的cookie或浏览器的cookie过 ...

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

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

  8. jQuery下拉框扩展和美化插件Chosen

    Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...

  9. (转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

    (原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll ...

随机推荐

  1. submit text 插件安装教程

    特注:import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); o ...

  2. 关于java.lang.NullPointerException: Module 'null' not found.的问题

    在用eclipse做struts1项目时,配置都ok了.可是一运行就报java.lang.NullPointerException: Module 'null' not found.错. 代码如下: ...

  3. Commons Math - Primes

    org.apache.commons.math3.primes.Primes 是关于质数操作的工具类. 1. public static boolean isPrime(int n) 判断 n 是否为 ...

  4. ubuntu忘记密码,忘记root密码的解决方法

    转载于http://forum.ubuntu.org.cn/viewtopic.php?t=272164 ubuntu的root默认是禁止使用的,在安装的时候也没要求你设置root的密码,和红帽系统系 ...

  5. Agile.Net 组件式开发平台 - 数据报表组件

    Agile.Report.dll 文件为平台数据报表支持库,基于FasstReport.Net扩展重写,提供了非常强大的自定义报表的功能使开发者为应用程序快速有效地生成报表.报表类库提供了创建报表所需 ...

  6. Linux命令(1):cd命令

    1.作用:改变工作目录: 2.格式:cd  [路径]  其中的路径为要改变的工作目录,可为相对路径或绝对路径 3.使用实例:[root@www uclinux]# cd /home/yourname/ ...

  7. 三星智能手机如何运用Smart Switch?

    1.Smart Switch是指? 使用前注意事项: 将两部智能手机的距离保持在50cm以内 两部智能手机都下载相同的最新版本Smart Switch 确认可支持的机器参考应用程序说明 不受干扰的安静 ...

  8. linux中vsftpd登陆慢卡问题解决方法

    1.修改服务器上的/etc/resolv.conf令其内容只有类似 nameserver 192.81.133.229 nameserver 114.114.114.114 出现问题的机器的resol ...

  9. 在java中HttpServletResponse响应中文出现乱码。

    以字符串的形式输出. 1.response.getWriter().write("您好中国hello"); 如果这样输出的话.则浏览器结果为: 2.加上代码 response.se ...

  10. Contest1065 - 第四届“图灵杯”NEUQ-ACM程序设计竞赛(个人赛)E粉丝与分割平面

    题目描述 在一个平面上使用一条直线最多可以将一个平面分割成两个平面,而使用两条直线最多可将平面分割成四份,使用三条直线可将平面分割成七份--这是个经典的平面分割问题,但是too simple,作为一个 ...