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

转自:http://www.itokit.com/2014/0820/75058.html

我们在编辑页面元素排序的时候,我推荐使用jquery插件:dragsort
dragsort官网地址:http://dragsort.codeplex.com/
在编写网页的时候,有时可能需要对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″.

时间: 2024-07-30 17:47:18

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

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

在编写网页的时候,有时可能需要对ul的li进行排序,今天就给大家推荐使用jquery插件jquery list dragsort实现列表拖动排序效果. 效果如图: jquery list dragsort列表拖动插件使用方法 $("ul").dragsort({     dragSelector: "li",     dragEnd: function() { },     dragBetween: false,     placeHolderTemplate: &

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

代码压缩包下载: http://pan.baidu.com/s/1mgxAIy0 代码一预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

jquery 鼠标拖动排序Li或Table

1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

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

很多网站的拖动布局的例子都是采用浏览器的COOKIE来记录用户拖动模块的位置,也就是说拖动后各模块的排序位置信息是记录在客户端的cookie里的.当用户清空客户端的cookie或浏览器的cookie过期后,再次访问页面时,发现布局又还原成最初的状态.这种cookie记录的方式使用简单,但不适合像个人中心.管理系统主页的要求. 本例实现的效果: 通过拖动随意布局页面模块. 记录拖动后模块的位置,并记录到数据库中. 页面永久性布局,用任意浏览器在任意时候打开,页面布局不变.(除非用户再次更改模块的排

jQuery UI 拖动(Draggable) - 事件

定义和用法 draggable 上的 start.drag 和 stop 事件.拖拽开始时触发 start 事件,拖拽期间触发 drag 事件,拖拽停止时触发  stop 事件 示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&

jQuery UI 拖动(Draggable) - Handles和Cancel

定义和用法 只有当光标在 draggable 上指定部分时才允许拖拽.使用 handle 选项来指定用于拖拽对象的元素(或元素组)的 jQuery 选择 器或者当光标在 draggable 内指定元素(或元素组)上时不允许拖拽.使用 cancel选项来指定取消拖拽功能的 jQuery 选择器 示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equi

jQuery UI 拖动(Draggable) - 还原位置

定义和用法 当带有布尔值 revert 选项的 draggable 停止拖拽时,返回 draggable(或它的助手)到原始位置 示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>jQuery 

jQuery UI 拖动(Draggable) - 延迟开始

定义和用法 通过 delay 选项设置延迟开始拖拽的毫秒数.通过 distance 选项设置光标被按下且拖拽指定像素后才允许拖拽 示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>jQuery 

基于jQuery图片自适应排列显示代码

基于jQuery图片自适应排列显示代码.这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="max-width:900px;margin:auto;padding:0 10px"> <h3>演示样式一</h3> </div> <div style="max-width:908px;margin:auto;p