jQuery列表拖动排列-jquery list dragsort插件参数和使用方法

时间:2022-05-02 00:48:01

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

效果如图:

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列表拖动排列&lpar;由项目提取&rpar;

    版权声明:本文为博主原创文章,未经博主同意不得转载. 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&lpar;终极jQuery插件列表&rpar;

    下面的文章可能出自一位奥地利的作者,  列出很多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. &lpar;转&rpar;jQuery Mobile 移动开发中的日期插件Mobiscroll 2&period;3 使用说明

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

随机推荐

  1. 临时存存储页面上的数据---Web存储

    HTML5 Web存储的两种方法使用 localStorage和sessionStorage 参考: http://www.cnblogs.com/taoweiji/archive/2012/12/0 ...

  2. cadence遇到的问题&lpar;持续更新&rpar;

    1.画了DB9的封装,共十一个焊盘,其中两个是机械焊盘,在绘制PCB板时,想要将其接地,但无法连接,如图所示 因为是机械焊盘,所以无法用更改logic的方法进行网络更改,现在只发现一个办法,就是更改封 ...

  3. php 中的&dollar;argv与&dollar;argc

    例如 php test.php as a joke print_r($argv); echo $argc; print_r($argv); array_shift($argv); echo $argc ...

  4. Solr集群、KI分词、项目实战

    Solr是一个高性能,采用Java开发,基于Lucene的全文搜索服务器.同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展并对查询性能进行了优化,并且提供了一个完善 ...

  5. SilkTest Q&amp&semi;A 7

    Q61.有一个用Dotnet开发的应用,有1000个为测它而录制的case,一直都运行的很正常,直到有一天… 有人改变了该应用命名空间,由于现在有一个新的window或是panel出现,所以测试脚本一 ...

  6. 关于if后面直接加上参数名,不加条件的用法

    <template> <section> <p v-if="aa">{{aa}}</p> <p v-if="bb&q ...

  7. Py西游攻关之Socket网络编程

    新闻 管理   Py西游攻关之Socket网络编程   知识预览 计算机网络 回到顶部 网络通信要素: A:IP地址   (1) 用来标识网络上一*立的主机 (2) IP地址 = 网络地址 + 主机 ...

  8. npm是什么,用来干嘛的

    网上的 npm 教程主要都在讲怎么安装.配置和使用 npm,却不告诉新人「为什么要使用 npm」.今天我就来讲讲这个话题. 本文目标读者是「不太了解 npm 的新人」,大神您别看了,不然又说我啰嗦了 ...

  9. MySQL一千行笔记

    /* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限验证登录MySQL */ mysq ...

  10. 错误RuntimeError&colon; Invalid DISPLAY variable

    原因:matplotlib的backend中的FltkAgg, GTK, GTKAgg, GTKCairo, TkAgg , Wx or WxAgg这几个backend都要求有GUI图形界面的 首先查 ...