jQuery可拖拽排序列表jquery-sortable-lists
jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动，拖动后回调,点击可以折叠树型结点，可以用来在后台模仿wordpress后台拖动菜单，实现多级菜单。
GitHub地址： https://github.com/camohub/jquery-sortable-lists
js代码：
var options = {
placeholderCss: {'background-color': '#ff8'},
hintCss: {'background-color':'#bbf'},
isAllowed: function(cEl, hint, target){
var parent_id= hint.parents('li').first().data('module'); //当前 parent id
var current_id=cEl.data('module'); //当前选中的选项
/**
* 表示c选项只能给在自己内部排序与产生子类
*/
if(hint.parents('li').first().data('module') === 'c' && cEl.data('module') !== 'c'){
hint.css('background-color', '#ff9999');
return false;
}else{
hint.css('background-color', '#99ff99');
return true;
}
},
opener: {
active: true,
close: 'images/Remove2.png',
open: 'images/Add2.png',
openerCss: {
'display': 'inline-block',
'width': '18px',
'height': '18px',
'float': 'left',
'margin-left': '-35px',
'margin-right': '5px',
'background-position': 'center center',
'background-repeat': 'no-repeat'
},
openerClass: ''
}
},
sWrapper = $('#settingsWrapper');
$('#sTree2, #sTree').sortableLists(options);
完整html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'> <title>jQuery可拖拽排序的列表代码</title> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/github-dark.css" media="screen"> <style type="text/css">
html, body, ul, li { margin:0; padding:0; }
ul, li { list-style-type:none; color:#b5e853; border:1px solid #3f3f3f; }
ul.sTree, ul{ padding:0px; background-color:#151515; }
ul.sTree2 li, ul#sortableListsBase li { padding-left:50px; margin:5px; border:1px solid #3f3f3f; background-color:#3f3f3f; }
li div { padding:7px; background-color:#222; Nborder:1px solid #3f3f3f; }
li, ul, div { border-radius: 3px; }
.red { background-color:#ff9999; }
.blue { background-color:#aaaaff;}
.green { background-color:#99ff99; }
.gree2 { background-color:#bbffbb; }
.yellow { background-color:#ff8; }
.brown { background-color:#c26b2b; }
.pT20 { padding-top:20px; }
.pV10 { padding-top:10px; padding-bottom:10px; }
.dN { display:none; }
.zI1000 { z-index:1000; }
.c1 { color:#b5e853; }
.c2 { color:#63c0f5; }
.c3 { color: #f77720; }
.c4 { color: #888; }
.bgC1 { background-color:#ccc; }
.bgC2 { background-color:#ff8; }
.small1 { font-size:0.8em; }
.small2 { font-size:0.7em; }
.small3 { font-size:0.6em; }
.tAR { text-align:right; }
.clear { clear:both; }
img.descPicture { display:block; width:100%; margin:0 7px 30px 0; float:left; cursor:pointer; /*transition: all 0.5s ease;*/ }
img.descPicture.descPictureClose { width:150px; }
#sTree2 { margin:10px auto; }
</style> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <script src="js/jquery-sortable-lists.min.js"></script>
<script type="text/javascript">
$(function()
{
var options = {
placeholderCss: {'background-color': '#ff8'},
hintCss: {'background-color':'#bbf'},
isAllowed: function(cEl, hint, target){ var parent_id= hint.parents('li').first().data('module'); //当前 parent id
var current_id=cEl.data('module'); //当前选中的选项 /**
* 表示c选项只能给在自己内部排序与产生子类
*/
if(hint.parents('li').first().data('module') === 'c' && cEl.data('module') !== 'c'){
hint.css('background-color', '#ff9999');
return false;
}else{
hint.css('background-color', '#99ff99');
return true;
}
},
opener: {
active: true,
close: 'images/Remove2.png',
open: 'images/Add2.png',
openerCss: {
'display': 'inline-block',
'width': '18px',
'height': '18px',
'float': 'left',
'margin-left': '-35px',
'margin-right': '5px',
'background-position': 'center center',
'background-repeat': 'no-repeat'
},
openerClass: ''
}
}, sWrapper = $('#settingsWrapper'); $('#sTree2, #sTree').sortableLists(options); $('#toArrBtn').on('click', function(){ console.log($('#sTree2').sortableListsToArray()); });
$('#toHierBtn').on('click', function() { console.log($('#sTree2').sortableListsToHierarchy()); });
$('#toStrBtn').on('click', function() { console.log($('#sTree2').sortableListsToString()); });
$('.descPicture').on('click', function(e) { $(this).toggleClass('descPictureClose'); });
});
</script>
</head>
<body>
<div class="container">
<section id="main_content"> <ul class="sTree2 listsClass" id="sTree2">
<li id="item_a" data-module="a">
<div>选项 a</div>
</li>
<li class="sortableListsOpen" id="item_b" data-module="b"> <!-- sortableListsOpen 默认打开 -->
<div>选项 b</div>
<ul class="">
<li id="item_b1" data-module="b">
<div>选项 b1</div>
</li>
<li id="item_b2" data-module="b">
<div>选项 b2</div>
</li>
<li id="item_b3" data-module="b">
<div>选项 b3</div>
</li>
<li id="item_b4" data-module="b">
<div>选项 b4</div>
</li>
<li id="item_b5" data-module="b">
<div>选项 b5</div>
</li>
</ul>
</li>
<li class="" id="item_c" data-module="c">
<div>选项 c</div>
<ul class="">
<li id="item_c1" data-module="c">
<div>选项 c1</div>
</li>
<li id="item_c2" data-module="c">
<div>选项 c2</div>
</li>
<li id="item_c3" data-module="c">
<div>选项 c3</div>
</li>
<li id="item_c4" data-module="c">
<div>选项 c4</div>
</li>
<li id="item_c5" data-module="c">
<div>选项 c5</div>
</li>
</ul>
</li>
<li class="" id="item_d" data-module="d">
<div>选项 d</div>
<ul class="">
<li id="item_d1" data-module="d">
<div>选项 d1</div>
</li>
<li id="item_d2" data-module="d">
<div>选项 d2</div>
</li>
<li id="item_d3" data-module="d">
<div>选项 d3</div>
</li>
<li id="item_d4" data-module="d">
<div>选项 d4</div>
</li>
<li id="item_d5" data-module="d">
<div>选项 d5</div>
</li>
</ul>
</li>
<li class="" id="item_e" data-module="e">
<div>选项 e</div>
</li>
<li class="" id="item_f" data-module="f">
<div>选项 f</div>
</li>
</ul> </section> </div>
</body>
</html>
jQuery可拖拽排序列表jquery-sortable-lists的更多相关文章
- jquery sortTable拖拽排序
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ...
- jQuery 鼠标拖拽排序
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）
现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码, ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
- ListView列表拖拽排序
ListView列表拖拽排序能够參考Android源代码下的Music播放列表,他是能够拖拽的,源代码在[packages/apps/Music下的TouchInterceptor.java下]. 首 ...
- odoo开发笔记-tree列表视图拖拽排序
odoo列表tree视图 拖拽排序 实现效果: 实现方式: 模型中定义字段: class CusYourModel(models.Model): """ 你的模型 &qu ...
- vue列表拖拽排序功能实现
1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束 ...
- 基于html5拖拽api实现列表的拖拽排序
基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...
随机推荐
- ES6新特性：使用新方法定义javascript的Class
ES6中定义类的方式, 就是ES3和ES5中定义类的语法糖,虽然也有些区别,但是整体定义类的方式更加简洁,类的继承更加方便, 如果想对ES6中的继承更加熟悉, 最好了解ES5中原型继承的方式, 博客园 ...
- sql 关于查询时 出现的 从数据类型 varchar 转换为 numeric 时出错 的解决方法。
出现这种问题 一般是查询时出现了 varchar 转 numeric 时出了错 或varchar字段运算造成的 解决方法: 让不能转的数不转换就可以了 sql的函数有个isNumeric(参数) 用 ...
- ARC下OC对象和CF对象之间的桥接(bridge)
在开发iOS应用程序时我们有时会用到Core Foundation对象简称CF,例如Core Graphics.Core Text,并且我们可能需要将CF对象和OC对象进行互相转化,我们知道,ARC环 ...
- 魔术常量__DIR__
在PHP5.3中,增加了一个新的常量__DIR__,指向当前执行的PHP脚本所在的目录. 例如当前执行的PHP文件为 /www/website/index.php 则__FILE__等于'/www/w ...
- Freemarker判断是否为空
1.判断对象是否为空 freemarker中显示某对象使用${name}. 但如果name为null,freemarker就会报错.如果需要判断对象是否为空: <#if name??> - ...
- 初步搭建RocketMQ环境
1. 去官网https://github.com/alibaba/RocketMQ/releases下载alibaba-rocketmq-3.2.6.tar.gz,这个是已经maven install ...
- 11月1日上午PHP------empty、 is_null、isset、unset的区别
1.empty 判断一个变量是否为"空".null.false.00.0.'0′.』.为以上值的变量在检测時都将返回true. 2.isset 判断一个变量是否已经设置.0.00. ...
- OpenGL Common Mistakes
https://www.opengl.org/wiki/Common_Mistakes Do not use constructors/destructors to initialize/destro ...
- Java多线程编程核心技术---学习分享
继承Thread类实现多线程 public class MyThread extends Thread { @Override public void run() { super.run(); Sys ...
- 《大型网站系统与Java中间件实践》读书笔记——CAP理论
分布式事务希望在多机环境下可以像单机系统那样做到强一致,这需要付出比较大的代价.而在有些场景下,接收状态并不用时刻保持一致,只要最终一致就行. CAP理论是Eric Brewer在2000年7月份的P ...