正文 

当前位置： 首页 > 开发 > java教程

nestable可拖拽树

wangmj518 wangmj518     2022-12-22     595

关键词：

Nestable是基于Bootstrap的一个可拖拽的树结构表现插件。

下面粗略的介绍一下它的用法，只作为学习参考，如有不合适之处，请各位凑合看。

下图是我在现在系统中用到的Nestable，对系统模块排序。

 

1.首先是需要引入的文件

  • bootstrap.min.css Bootstrap的CSS文件
  • font-awesome.min.css 这个是Bootstrap的一个图标和字体的插件，Nestable应该用了它的一些图标，如果不引入这个文件有可能图标不能显示出来。
  • ace.min.css 这个一直不知道是什么，没来得及查阅资料，有知道的请告知一下
  • jquery-2.0.3.min.js 这个不解释
  • bootstrap.min.js 同上
  • jquery.nestable.min.js 这是就是今天介绍的主体

以上文件我会统一放在附件里面

 

2.下面是一个示例

HTML：

Html代码  收藏代码

  1. <div class="dd">  
  2.     <ol class="dd-list">  
  3.         <li class="dd-item" data-id="1">  
  4.             <div class="dd-handle">Item 1</div>  
  5.         </li>  
  6.         <li class="dd-item" data-id="2">  
  7.             <div class="dd-handle">Item 2</div>  
  8.         </li>  
  9.         <li class="dd-item" data-id="3">  
  10.             <div class="dd-handle">Item 3</div>  
  11.             <ol class="dd-list">  
  12.                 <li class="dd-item" data-id="4">  
  13.                     <div class="dd-handle">Item 4</div>  
  14.                 </li>  
  15.                 <li class="dd-item" data-id="5">  
  16.                     <div class="dd-handle">Item 5</div>  
  17.                 </li>  
  18.             </ol>  
  19.         </li>  
  20.     </ol>  
  21. </div>  

 

在head标签内加入

Js代码  收藏代码

  1. <script type="text/javascript">  
  2.     jQuery(function()   
  3.         $('.dd').nestable();  
  4.     );  
  5. </script>  

  

 

3.事件Events

当重新排序后触发

Js代码  收藏代码

  1. $('.dd').on('change', function()   
  2.     /* on change event */  
  3. );  

 

4.方法Methods

将页面显示的树结构序列化

Js代码  收藏代码

  1. $('.dd').nestable('serialize');  

 

按开头的例子序列化返回的JSON数据应该是

Json代码  收藏代码

  1. ["id":1,"id":2,"id":3,"children":["id":4,"id":5]]  

 

Js代码  收藏代码

  1. $('.dd').nestable('expandAll');//展开所有节点  

 

Js代码  收藏代码

  1. $('.dd').nestable('collapseAll');//折叠所有节点  

 

5.配置Configuration

Js代码  收藏代码

  1. $('.dd').nestable( /* config options */ );  

 可配置项：

    • maxDepth 树节点层次（默认5）
    • group 允许在列表之间拖动的组ID（默认0）
    • listNodeName 创建树结构的的HTML标签（默认'ol'）
    • itemNodeName  创建树结构节点的HTML标签（默认'li'）
    • rootClass 根节点的class属性名称（默认'dd'）
    • listClass 所有节点的class属性名称（默认'dd-list'）
    • itemClass 树结构叶子节点class名称（默认'dd-item'）
    • dragClass 
    • handleClass 
    • collapsedClass 
    • placeClass 
    • emptyClass 
    • expandBtnHTML 
    • collapseBtnHTML 

h5拖拽,直接指对象设置可拖拽

...拖放是标准的一部分，任何元素都能够拖放。设置元素为可拖放首先，为了使元素可拖动，把draggable属性设置为true：<imgdraggable="true"/> 拖动什么-ondragstart和setData()然后 查看详情

117可拖拽弹窗

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>*padding:0;margin:0;html,bodyheight:100%;.outerBoxwidth:100%;height 查看详情

弹出框组件，可拖拽

/***弹出框组件*/(function($){varUtils={showMask:function(){var$mask=$("#mask");if($mask.length===0){$(‘body‘).prepend("<divid=‘mask‘class=‘mask‘></div>");}$("#mask").css({width:Math.max(documen 查看详情

js实现可拖拽的div

实现一个div可以被拖拽，代码如下所示：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>zzw_drap</title><style>*{margin:0;padding:0;}#box{position:absolute;top:100 查看详情

移动端可拖拽的进度条

 原生js  移动端可拖拽的进度条效果图:代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>干货-课程-完成</title><style>ul.lanren{margin:100pxauto;}.scal 查看详情

可拖拽bottomsheetviewcontroller(代码片段)

当我们想弹出一个预览视图，bottomsheetmodalviewcontroller非常实用。在iOS中，长按拖拽手势可以让controller上滑或者向下消失。实现原理是，通过监听拖拽事件，动态改变view之间的autolayout约束，并加上少许动画。... 查看详情

可拖拽listview基本使用技巧（dragsortlistview）

可拖拽的listview，DragSortListView这是gitHub上的一个开源项目。链接点击打开链接。这个开源控件主要是为了实现listview的item上下拖拽效果以便达到美化界面的作用。   先来看三张效果图。    第一张为初始的DragSortListView效... 查看详情

android可拖拽view的简单实现(代码片段)

其实Android可拖拽View实现起来很简单，最简单的就是实现View的setOnTouchListener方法。下面这段代码就实现了如下两个功能：1、View随着手指的拖动儿拖动。2、当松开手指的时候，如果View在屏幕的右半边，则自动让其贴到屏幕右边... 查看详情

android可拖拽view的简单实现(代码片段)

其实Android可拖拽View实现起来很简单，最简单的就是实现View的setOnTouchListener方法。下面这段代码就实现了如下两个功能：1、View随着手指的拖动儿拖动。2、当松开手指的时候，如果View在屏幕的右半边，则自动让其贴到屏幕右边... 查看详情

zdialog可拖拽弹出层

zDialog弹出框：代替window.open、window.alert、window.confirm；提供良好的用户体验；水晶质感，设计细腻，外观漂亮；兼容ie6/7/8、firefox2/3、Opera；弹出框在ie6下不会被select控件穿透；无外部css文件，引用Dialog.js即可使用；对iframe下的应... 查看详情

js中可拖拽的甘特图和流程图

甘特图：https://www.douban.com/note/441706674/https://www.uedsc.com/jquery-ganttview.htmlhttps://github.com/thegrubbsian/jquery.ganttViewhttp://download.csdn.net/detail/hspeed/5479645http://www.cnblogs.co 查看详情

androidactivity内实现可拖拽悬浮控件(代码片段)

效果图实现方式：//在activity中重写此方法@OverrideprotectedvoidonPostCreate(@NullableBundlesavedInstanceState)super.onPostCreate(savedInstanceState);//添加一个悬浮Viewroot=findViewById(android.R.id.conte 查看详情

移动端可拖拽悬浮窗+点击事件

<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><!--设置viewport--><metaname="viewport"content="width=device-width,initial-scale=1.0,user-scalable=0"/></he 查看详情

js仿苹果悬浮可拖拽按钮，并且点击展开效果

今天写了一个仿苹果的悬浮按钮，由于只在右侧展开，所以只能上下拖拽，展开效果入下1.html<divclass="info-nr"id="info-nr"><divid="info-nr-phone"class="info-nr-phone"><sectionid="toMenu"></section><divclass="menu_01"> 查看详情

vue侧边栏可拖拽，右侧区域可自适应宽度(代码片段)

今天工作中遇到一个需求，侧边栏增加一可拖拽条，拖拽后左右两边都能自适应宽度查阅相关实现，发现这种方法亲测可用，在此记录一下1.效果显示图效果图1拖拽效果图2.页面代码<template><el-container><e... 查看详情

可拖拽圆形进度条组件（支持移动端）(代码片段)

.katexdisplay:block;text-align:center;white-space:nowrap;.katex-display>.katex>.katex-htmldisplay:block;.katex-display>.katex>.katex-html>.tagposition:absolute;right:0px;.katexfont:1.21em/1.2Ka 查看详情

javascript写的一个可拖拽排序的列表

自己常试写了一个可拖拽进行自定义排序的列表，可能写的不太好，欢迎提供意见。我的思路是将列表中的所有项都放进一个包裹层，将该包裹层设为相对定位，每当点击一个项时，将该项脱离文档并克隆一份重新添加到文档末... 查看详情

更改并发布 Jquery 数组

...】：2015-11-2309:11:36【问题描述】：https://github.com/dbushell/Nestable我正在使用DavidBushell的上述源代码来创建可拖放编辑的嵌套列表。我有两个（相互连接的）主列表，它们的id是#nestable和#nestable2这两个列表可以在这个JSFiddle:https://jsf 查看详情