[ExtJs] 拖动 变更元素位置

本文介绍如何在ExtJS中实现拖动导航节点,动态调整右侧展示区域的布局。通过将多维树结构转为一维数组并渲染,拖动节点时找到移动前后的位置,更新元素顺序,实现布局变化。核心方法包括生成节点和处理移动节点的逻辑。
摘要由CSDN通过智能技术生成

实现一个,左边是导航信息,右侧是展示区域,然后拖动 导航节点重新定位后,右侧也随之j进行布局变化,如下图:

核心方法:

ExtJS容器对象.move(fromIdx,toIdx)

因为涉及的知识点较多,后期有空补上,先贴上核心思想:

生成节点

右侧的容器元素,首先就是根据左侧的树形展开结构,依次渲染的,也就是将多维的树,看成一个导航。

将多维的数组,平铺为一个一维数组

根据这个数组,进行依次加载各类控件。

移动的节点 

寻找移动的位置后,他的前一个节点(注意不是同级前一个 而是 树形展开后前一个)这是为了定移动目标,知道移动到谁的屁股后面

  /*
        寻找上一个树形文件节点
    */
    findPreNode(node) {
        const me = this;
        if(!node) return null;
        let preNode = node.previousSibling;
        if(preNode) {
   
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

29号同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值