ztree实现拖拽复制节点到另一个地方

2024-09-07

ztree实现拖拽移动和复制

1.官网下载ztree:http://www.treejs.cn/v3/api.php 2.引入jquery.ztree.all.min.js 注意,这是基于jQuery的插件,请引入相关js 3.设置setting var setting = { data: { simpleData: { enable: true, idKey: "id", pIdKey: "parentId", rootPId: - }, key: { url: "nourl&quo

zTree的拖拽排序

ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台. 在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比如自定义一个tree传入ztree, 不使用ztree的识别字段,而是使用自定义字段,然后当ztree的节点发生变化时,维护这些自定义字段,从而使得整个tree是有序的,并支持拖拽. 上边的这个解决方案,有一个问题,就是使用javascript构造的tree,传入ztree之后,会发生堆栈溢出,初步

Html5拖拽复制

拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需要实现Html5拖拽复制的功能,Html5拖拽复制很简单,只需要在普通Html5拖拽的过程中做一点小小的改动即可. ps: 本篇博文为非首页文章,只是简单的笔记. 浏览器支持 Internet Explorer 9 Firefox Opera 12 Chrome Safari 5 v1.0代码部分

实现拖拽复制和可排序的react.js组件

在实现复制前,对之前的拖拽排序组件属性进行了修改. 摒弃了value中的content属性,拖拽组件暴露的render函数,利用这个属性进行组件内部子组件的渲染,这点主要是参考了蚂蚁金服的Ant design里面一些组件的设计. 为了实现Data和model的脱藕,和sortKey一样,组件增加codeKey属性. 拖拽复制的效果如下: 由于实现组件的核心是根据value数据来渲染页面,因此实现拖拽复制功能,只需要在"拖拽释放"的时候,将被拖拽方的数据放到当前目标所在的value数组中

Ubuntu 无法拖拽复制

首先确定在ubuntu 下,vmware tools 已经安装成功有些时候会出现vmware tools 已经安装成功,但是却无法实现拖拽和复制 1.首先在虚拟机设置里面勾选共享剪切板 2.然后重启所有vmware的服务,也可以如下写个批处理运行,保存成.bat文件,然后使用管理员运行,之后再重新启动虚拟机就发现可以拖拽,共享了剪切板了(貌似拖拽的功能只能从ubuntu向外拖拽,但是复制文件都可以内外共享粘贴) @echo stop VMware Services net stop VMw

项目中集成Easyui-Tree，可拖拽更新节点

由于公司架构较旧,使用的jdk版本为1.4,页面上也没有el表达式. Html <ul class="easyui-tree" id="data"></ul> jq $(function(){ $('#data').tree({ url:'<%=context%>/test.do?action=toTree', lines:true, //显示树线 dnd:true, //可拖动 animate:true, //展开效果 onCl

爱上MVC3~MVC+ZTree实现对树的CURD及拖拽操作

回到目录上一讲中,我们学习了如何使用zTree对一棵大树(大数据量的树型结构的数据表,呵呵,名称有点绕,但说的是事实)进行异步加载,今天这讲,我们来说说,如何去操作这棵大树,无非就是添加子节点,删除节点,编辑节点,节点之间的拖拽,节点位置的变化(排序)等等. 事实上,jquery.ZTree的demo已经把前台JS代码给的很清晰了,我们只要稍加修改,然后把后台CS代码写好就可以了,我将demo的前台代码做了简单的处理,减化了些代码,项目架构使用microsoft mvc 3.0 前台HTML代

MVC+ZTree实现对树的CURD及拖拽操作

上一讲中,我们学习了如何使用zTree对一棵大树(大数据量的树型结构的数据表,呵呵,名称有点绕,但说的是事实)进行异步加载,今天这讲,我们来说说,如何去操作这棵大树,无非就是添加子节点,删除节点,编辑节点,节点之间的拖拽,节点位置的变化(排序)等等. 事实上,jquery.ZTree的demo已经把前台JS代码给的很清晰了,我们只要稍加修改,然后把后台CS代码写好就可以了,我将demo的前台代码做了简单的处理,减化了些代码,项目架构使用microsoft mvc 3.0 前台HTML代码如下:

Jquery 可拖拽的Ztree

比较懒,就只贴关键代码吧,自己把有用的属性全部打印出来了,也加了不少注释. 保存后涉及到的排序问题,刷新问题还未考虑到,后面有的话再加. $.fn.zTree.init($("#ztree"), { data: { simpleData: { enable: true } }, view:{ selectedMulti :false }, edit: { //此属性添加后,树才可以被拖拽 enable: true, showRemoveBtn: false, showRenameBtn

winform 两个TreeView间拖拽节点

/// <summary> /// 正在拖拽的节点 /// </summary> private TreeNode DragNode = null; /// <summary> /// 节点来源 /// </summary> private TreeView NodeSource = null; /// <summary> /// 树形节点移动方向 /// </summary> private MoveTreeView MoveTo

easyui树节点拖拽排序的存储过程

easyui树的拖拽排序功能 easyui树中有拖拽功能树结构如下: 一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求: (1)行政区域没有子节点,点击text加载部门:(2)点击部门的text,如果有下级部门则加载部门,没有则加载人员:(3)树都有拖拽排序功能 1.前台页面: <script type="text/javascript" src = "js/lib/jquery-1.8.0.min.js"></sc

html5 Sortable.js 拖拽排序源码分析

最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http://rubaxa.github.io/Sortable/ 技术交流qq群 302817612 拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上 ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件

HT for Web列表和3D拓扑组件的拖拽应用

很多可视化编辑器都或多或少有一些拖拽功能,比如从一个List列表中拖拽一个节点到拓扑组件上进行建模,并且在拖拽的过程中鼠标位置下会附带一个被拖拽节点的缩略图,那么今天我们就来实现这样的拖拽效果. 首先我们需要创建一个List列表,在列表中加入图片信息,让List列表不那么单调,先来看看效果图. 接下来我们一步一步来是想这个List列表,先来解决下数据,在这里我就列举一两个: var products = [ { ProductId : 1, ProductName : "Chai",

jQ插件--时间线插件和拖拽API

这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接, 那个三角会滚动, 然后左侧的界面也会滚动: 实际的效果如下图,用户点击左侧的按钮或者右侧的input,滚动条都会主动滚动, 这里有个小技巧就是用after和before伪类生成三角形, 用户点击按钮的滚动效果直接用jq的animate方法: 点击查看DEMO:打开 <!-- //设置内容; window.onWebMessage( '{"ty

HTML5 拖拽复制功能的实现方法

Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head><styletype="text/css">#div1 {width: 700px;height: 120px;padding: 10px;border: 1px solid #aaaaaa;}#drag1 {cursor:pointer;}</style>&

React Editor 应用编辑器(1) - 拖拽功能剖析

这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页文档流布局,绝对定位同时支持对插入的任何 React 组件都可以直接作为编辑元素拖拽到页面中兼容 React-Native 的 web 组件可以让它生成 android 和 ios 原生页面拥有 Gaea-Preview 套件,传入 Gaea-Editor 生成的 json,可以立刻生成页面拥有 Ga

TREEVIEW拖拽对应修改目录

附件:http://files.cnblogs.com/xe2011/TreeView_Drag_Directory%E6%93%8D%E4%BD%9C.rar TREEVIEW拖拽对应修改目录 using System.IO; private static string RootPath = @"D:\Administrator\Documents\TestData"; //返回 D:\Administrator\Docum

使用NGUI实现拖拽功能（拼图小游戏）

上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现实现原理 NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的方法即可 public class DragOnPic : UIDragDropItem { protected override void OnDragDropStart () { base.OnDragDropStart (); } protected override void OnDragD

sortable.js 拖拽排序及配置项说明

// 拖动排序 $(function() { /*排序*/ //排序 // Simple list ]; new Sortable(list, { group: "name", animation: , //动画参数 store: null, // @see Store /* handle: ".BtnMove",*/ // 点击目标元素开始排序(只能拖拽当前元素) draggable: ".application-li", // 指定那些选项需

pc端移动端拖拽实现

#div1 { width: 100px; height: 100px; background: red; position: absolute; } html <div id="div1"> </div> js window.onload = function () { var oDiv = document.getElementById('div1'); //pc端 oDiv.onmousedown = function (ev) { var oEvent

ztree实现拖拽复制节点到另一个地方

热门专题