55、商品服务-API-三级分类-修改-拖拽数据收集

前边我们编写好了节点拖拽功能，比如我们将手机通讯我们拖到我们的其他前边，当我们拖拽成功以后，我们就应该将手机通讯的最新信息发给我们数据库进行保存，那这些信息呢，就包含手机通讯所处的最新的副节点D，以及手机通讯最新的排序，这个些排序呢，要跟其他子节点合在一起，重新做一个排序，以及最新节点的层级，因为这个层级有可能发生变化。比如我们拖到了根节点，这。能拖到根节点，这那这样呢，层级就发生了变化，其实也就是我们整个拖拽功能就能影响我们某一个节点的这三个属性，比如它所在的负节点，以及它的层级，以及它最新的排序。那想要做这个功能，我们首先要做的第一件事就是要监听我们拖拽成功这个事件，当我们拖拽成功以后，我们就要将这些所有我们要收集到的数据拿来再发给数据库，那这个事件呢，我们可以参照element，在可拖拽节点我们来往下翻。

这呢有一个events事件，事件里边有一个叫node drug end，就是节点拖拽结束以后，这个结束呢是可能未成功，当然我们要监听成功拖拽，我们就可以监听node drop，这是当我们拖拽成功完成时触发的事件，这个事件呢肯定是一个回调函数，这个回调函数拥有四个参数，分别代表被拖拽的当前节点，以及当前节点进入到了哪个节点，以及进入到这个节点的什么位置，比如它有三种情况，进入到这个节点之前，之后还是节点里边，还有呢，我们的整个事件对象，那我们就可以用这个nod drop事件，这个事件怎么用，我们可以参照示例代码，在示例代码里边来打开，在可拖拽节点示例代码里边也有一个叫nod job，我们监听事件呢，用an。

我们以前用过，我们绑定单击事件，是用at click click来绑定单击事件，它的全称写法是v on，冒号click，所以我们来绑定拖拽成功的事件，我们也用这种写法，我把这个复制过来，我们也要用这个功能，把它放到我们的E里边，当我们拖拽成功以后呢，调用这个回调处理，我们把它复制过来，这个handle drop事件CTRLC复制一下，放到我们的muscles里边。Auto shift f代码整理一下，当我们来拖拽成功以后，会触发这个函数，这个函数给我们三个参数，最后一个是事件对象，我们就暂时不用了。这三个参数他之前说了，这是当前正在拖拽的节点，这是它进入到哪个节点，这进入到这个节点的什么位置，它有前后以及里边来保存，先看一下页面效果。

把控制台先清空好，我们假设呢，拖拽还是把手机通讯我们拖到其他的前边我们拖拽，当拖拽完成以后，自然会触发handle drop事件。它的三个参数，第一个是我们当前正在拖拽的节点，那就是手机通讯，我们打开在data里边封装了当前节点的详细内容内就是我们当前正在拖拽的手机通讯。第二个呢，是它进入到了哪个节点，我们在这呢？它是什么之后，什么之后呢，就应该是港台图书之后来展开，它进入到哪个节点呢？我们来看一下这个节点的详细信息，这是港台图书来相当进入到这个节点之后的位置。那我们就知道了这几个信息，那通过这几个信息，我们要获取这些数据，首先第一个数据我们得知道当前节点，当前节点最新的负节点ID。

他现在呢，已经被拖到了这个位置，它的负节点ID是什么？其实我们都知道，如果我们拖到了某个人的前后，那我们手机通讯的负节点ID就应该是当前我拖到的这个元素前后，它所在的负节点，那就是这个节点所在的负节点的ID，在贝塔里边有封装这个ID，那就应该是这个。所以这是我们第一项数据，那就有出处了，我们知道当前节点的最新负节点的ID，第二个我们还得知道当前拖拽的这个节点的最新顺序，它的这个排序，这个顺序怎么来呢？也一样，我们知道了这个节点，以及知道它在某一个节点之后，在这个节点之后，那它的顺序呢，就相当于是我们所处的这个负节点，所有的子节点重新从零排个序，排到这儿，所以我们只需要获取到当前这个正在拖拽的节点，它是拖拽进了港台图书，就是这个节点它所在的父节点，这个父节点呢，相当于是它它的所有子节点展开。

这个子节点有一个最大特点，就是它还包含了刚拖进来的手机通讯，比如它是倒数第三个，我可以看一下，诶，倒数第三个展开我们看一下是不是手机通讯，诶在这那这样的话呢，我们就应该将这个负节点里边所有的子节点，我们给它从零排个序就行了。所以我们这个最新的排序，那就有落脚点了，接下来我们还应该知道它当前拖拽节点的最新层级，这个层级呢也非常简单，因为我们这个节点已经能进入到这个11了，相当于它负节点所在这儿了，那它所在的这个层级，我们看当前手机通讯它所在的层级，这直接有一个level，代表当前它所在这个数里边的层级。

所以这个呢，我们也都有出处了，也就是一句话，我们要的所有信息都能从第二个对象里边获取到。那我们来编写一下它完整的功能，那就应该是这样，首先当前节点最新的负节点ID，我们比如比如呢，有一个属性叫p cid，最新附节点的DD应该是什么呢？应该是我们所有信息都可以从第二个对象里边拿到，应该是他进入到的这个节点。而且呢，这有不同种情况，如果他是以前后方式进进入的，那他所在的父节点ID就是他兄弟的父亲ID，但如果他是以这种方式，比如我们将某一个节点以英的方式拖进去，我们将合约机拖到了d sa里边，他这种方式呢是应呢，那应呢，它所在的这个负节点ID就应该是当前节点，当前节点就是这它的这个ID，所以我们啊，还有不同情况，那这个先给它给一个零，我们来判断一下，如果说我们进入的方式不同，Drop t如果等等于北方。

或者是after drop等等于after。那么如果是这样，是以兄弟关系，前后关系进入，他的父ID就应该是兄弟父亲的ID，我们来可以看一下刷新，我们自己来拖拽一下，我们把它呢以前后关系进入，我们将手机通讯拖到。D sa的前边，那么手机通讯最新的ID就是node，他的这个兄弟，这个兄弟啊，是d sa所在的父亲，父亲的真正ID在data塔里边封装了ID，这个父亲呢，是图书，所以我们来取出一下当前节点父亲data塔的ID，所以我们的pcid就应该是我们进入的这个节点的父亲的data的cat ID，而否则。

否则如果我们是阴的来，我们也拖一下。我们将运营商的合约机能拖到d sa里边，如果现在是应的，那我们现在正在操作的这个节点，最新的ID就应该是当前元素，也就是这个data，它现在呢是d sa，也就是它的ID，不同情况取值是不一样的，那就是赵node，当前进入的元素不用去他父亲了，我们现在就在它里边，那就是当前的元素贝塔的KID，我们这个pcid的不同取值，这是我们说的当前。

节点负节点的ID，那包括当前节点最新的顺序，顺序怎么办呢？其实我们每拖一个节点进到任何位置，它所在的顺序都应该是当前节点的父亲，他所有的子节点拿过来重新排一个序，所以我们要便利他的这些兄弟，而且这些兄弟呢，情况不同也不一样。如果我们是以婴儿的方式进入，他的兄弟就是我们进入的这个节点，这个节点里边的颤nose就是他的兄弟。所以我们在这还得判断，如果说job type我们进入的方式是以婴儿的，那我们的这个兄弟要遍历的兄弟元素，那就是这个drop node里边的插的no。

是我们招node第2CHINA no，这个呢，就是我们当前正在拖拽节点的这些兄弟，我们将这些兄弟呢，我们比如保存在CB里边。这个兄弟呢，先是一个空，然后这些兄弟啊，如果是以婴儿方式进来，他的兄弟们是这些，但是如果是以北方after的方式进来，他的这个兄弟们呢，就不一样了，那我们直接在一个判断里边给它做好，这是应里边兄弟们是这些，而北方after呢，兄弟们就应该来看一下。我们将它拖到其他的前边。把这块清空，重新拖一下，我们将它拖到港台图书的前边，那他的这个兄弟就应该是这个节点，这个节点是港台图书他的父亲。

的所有子节点，就包含了我们新拖拽的这个。所以他的这个兄弟元素呢，就应该是取出父亲里边的差的no。那么在这来写一下siblings。它就应该是drop node。这是他最新的兄弟，Drop node里边的parent里边的这些他的nose，这是他的兄弟，而这些兄弟呢，我们要给他排序，所以我们for遍历一下，我们总是要便利一下这些兄弟，Let I等于零到I小于我们这些兄弟的长度，这是一个数组到I加加。我们来便利，我们拿出每一个这个元素里边的信息，他们都在这个data里边封装着，我们要提交给数据库的是什么呢？那就是我们要改哪个元素的顺序，或者哪个元素的负ID，或者哪个元素的层级，所以啊，我们要改，将改的信息，比如我整理成一个对象，我这个对象啊，最终全部收集我们放到我们这个数据区，比如我们有一个叫update noes，我们所有要修改的节点我们都保存到这儿，我们每处理一个节点给这个数组里边放一个，最终全发给我们服务器就行了。好，那我们现在来处理我们当前的兄弟里边第二个元素，好，这个元素，这个元素真正的内容，那现在在遍利他的这些兄弟们，这兄弟们的真正内容在data里边，我们拿到这个data的作用是什么？我们首先拿到。

贝塔里边的cat ID就是表示我在处理哪个兄弟，这些兄弟的ID我拿到以后，我们相当于要改兄弟的什么呢？兄弟的顺序他从零开始，我们重新给他排序，然后我们只要动了一个节点，所有兄弟的顺序呢，我们都给他改一下，那我们就来写一个对象，我们将我们要改的信息封装到对象里边，这个对象里边有一个属性叫count ID代表我当前要改哪个节点，这个节点最新的顺序是什么，那顺序呢，那我们就按病历的顺序来，我们直接给一个A，那我们最终将这个整个内容我们要修改呢，我要放进node那们这个update notes里边。

这是一个数组，我们直接点push给它放进去。好，放进去，这是我们来改兄弟的顺序。当然，除了改兄弟的顺序，我当前拖拽的这个节点有可能还会引起父子关系的变化，所以我们得判断一下，如果当前正在便秘的节点是我拖拽的节点，那这就是当前正在遍历的节点的ID，是我拖拽的节点，怎么判断呢？这就是当前正在拖拽的节点，拖拽的节点的ID，我们来获取一下当前拖拽的节点。

它的data塔里边有它的ID，所以我们来判断当前拖拽的节点，Data塔里边有它的节点ID，要说我们这个判断就是如果电力的是当前正在拖拽的节点，拖拽的节点，那么呢，我们不只要给他的放这个排序，我们还要放他最新的负ID，所以呢，其他兄弟元素只改顺序，放在这儿，兄弟元素只改顺序，而他自己呢，还要改他的负ID，所以我们给他放的时候，如果是自己，如果是自己，除了要改我们的这个顺序，还要改它的负ID parent cid，比如他负ID的值不应该是它以前的这个负ID的值了，应该是最新的负ID值，那最新的负ID值是什么呢？我们在这。

不同情况，我们在这儿获取到值了，我们就给它放到这，那这样移动便利以后，我们就拿到了要改的这个节点的全量信息，比如我们要改的是哪个节点，节点的ID，以及他最新的顺序，以及他最新的负ID。当然兄弟们呢，只需要改顺序，我们可以在控制台打印一下conso.log。我们来打印一下我们所有整理好的update notes，我们看一下对不对，Update notes保存，现在来看一下页面效果，我把这一块清空，当我把手机通讯我拖拽到其他的前边。

走，我们拖拽到其他节前面我们要修改的元素有14个，为什么有14个？那是因为我们这个节点下有14个子元素分别修改了什么？分别修改呢？我们来看第一个，第一个是22 sot是零，那就是第一个元素我们只改它的排序是零号，而我们真正要改的其实是我们倒数第三个元素。倒数第三个元素呢，它的排序是11，还有它最新的I已经变了，那其他它后边的这些负ID已及排序都是跟着变的，当然后边这些没变负ID，那我们这个数据就更好了，那我们再来测试一下，如果我们把某一个拖到里边，比如我把合约机拖到了d sa的里边，那我们都改了哪些呢？我发现我们改了15个。这15个的原因就是有我们当前节点，还有我们这个里边的14个，我把它重新刷新一下，那就应该是一个我们来刷新一下，我们就专门来改这一个。

比如这个d sa，我把手机拖到d sa里边，我们放一下，诶我们发现呢，要更新的只有这一个节点，这一个节点呢，是我们。D sa的这个手机这个节点，这个节点的负ID变成了最新的，包括排序它是第一个，那就是零，那我们就改好了，但是呢，这还有一个小问题，把这清空，先来刷新一下页面。我们将电子书刊我挪到前边的根节点位置，当我们挪动成功以后呢，它说要更新22个节点，那这22个节点呢，相当于我们要对这里所有的根节点来做一个排序，那我们来看这22个节点，那第一个节点那就应该是电子书刊，电子书刊新的负ID，我发现它是onDeFi，没有定义它的sortt呢是零，那其他节点，其他节点sortt往上排，这都没啥问题，那为什么我们这个on fight呢？那就是由于我们来看拖到这的时候，我们是将电子书刊data，我们正在拖动的节点叫电子书刊，我们拖到了图书的之前，我们看这个data，这叫图书之前。

而我们要设置电子书刊的负ID，我们是进入到北货的这个判断，它的这个负ID呢，是要找到我们当前进入的这个节点的父亲，父亲呢在这他的ID，而这个父亲呢，我们来看一下他的这个德塔变成了一个数组，也就说呢，不是真正的我们这些，比如其他人的这些父亲得塔呢，可能是一个对象，这变成了一个数组，所以呢，它没有取出数组里边所谓的ID，它就是unDeFi。

那其实呢，只要是onfi，那我们就应该给它给一个零，说明当前是根节点，否则才能取出它真正的负节点的ID，所以我们在这判断一下等等on，如果说它等等于onfi，那就给一个零，否则那就用它真实的这个值，我们来保存一下，刷新一下页面，我们看一下最终效果。我们呢，现在将我们的手机通讯，我们拖到上边，现在要修改22个节点，那第二个节点就应该是手机通讯，那第一个节点呢，是一排序为零，第二个是手机通讯，它的负ID是零，哎，So，是一，这就对了。包括我们把其他节点继续拖，比如数码我拖到第一个，现在呢，我们看要更新多少，我重新拖一下，手机通讯我拖第一个，现在我发现要跟66个，因为我们页面无刷新，每一次拖动要修改的数据有22个，我拖了三次，那就是66个，把页面刷新一下，重新给他拖，我把手机拖到最前面，我们看一下最终效果对不对，那手机就应该是第一个。

第一个的负ID是零没问题，它的sot也是对对的，其他一它的sot都没问题，那我们的负ID以及排序属性就简单整好了，那更复杂的呢，是我们每一个节点的最新层级。那这个层级怎么做？那就应该是我们当前正好便利在当前这个节点的时候，如果发现它的层级比以前有了变化，那它的这个层级带上它所有子节点的层级都应该发生变化，所以我们在这儿来判断一下，如果正在遍历的是当前节点，而且呢，它的层级还发生了变化，我们再判断一下，如果当前节点的层级，那这个是当前节点的ID，再来看一下当前节点的层级是count level，它怎么发生了变化呢？它以前正好拖拽的时候，它有一个默认层级，如果这两个层级不一样，说明我们这个当前节点层级发生变化，当前节点的层级就有了变化，我们在这儿来批注一下当前节点的层级。

发生变化，那发生变化，我们就要修改当前节点的层级信息。这个层级信息呢，假设我们有一个默认层级，看它level，诶，当前节点的默认层级，我们把它当前节点的默认层级拿过来，如果层级发生变化了，我就给它改层级，我们最终全部都放在一个方法里边，Count level count level的值呢，就应该是这个，那层级发生变化了，那我们就拿到它的最新层级。

最新层级是什么？最新层级呢？非常简单，我们只需要拿到当前节点，可以看一下，我们比如把电子书我拖到根节点，那电子书原来的这个层级我们看一下，电子书原来的层级是三，它叫电子书，而现在呢，他拖到了。某一个之前，那就是电子书刊之前，我们看一下，这是这个电子书刊之前。那它的层级如果是前后关系，那就是跟电子书刊的层级是一样的，那由原来的三变成了二，而如果是里边的关系，那它的这个层级就应该是跟当前元素的这个层级再加上一，那就是它最新的层级，所以我们在这儿还得判断它的这个层级，我们得根据不同的情况，如果它的这个drop type是北before after这种情况，那它的这个层级那就应该是跟我们当前正在拖动的这个元素的层级是一样的，哎，当前哎，就是这个元素，那就应该是跟它的层级，它是进入到这个元素里边，这个元素呢，它有一个层级，这个元素我们也不用看data塔，它直接呢有一个level。

他的这个层级是一样的。而否则，如果是婴儿的关系，那就应该是这个元素的层级，那既然是婴儿呢，那就在里边了，给他的这个层级加一，那就是它的层级，那最终呢，我们就在这改掉了它的层级，但是问题就是，如果真的当前节点的层级都发生变化了，那它的子节点层级肯定也会变，所以我们在这儿要继续修改子节点的层级修改。

他指节点的层级。这个子节点的层级呢，其实还是一个递归修改，因为子节点有可能还有其他子节点，那这个修改怎么做？我们重新刷新一下页面，那现在来看一下这个效果，假设我们现在呢，把摄影摄像我们提到了手机之前，那现在呢，我们要修改的这个元素摄影摄像，我们看一下我们当前正在拖拽的元素是摄影摄像，没问题，我们把它呢，放到了某一个节点之前是哪个节点呢？

是我们的这个手机节点，那我们想要修改摄影摄像的层级，以及它里边的这个层级，我们在这儿呢，写了一处代码，我们会便利当前节点的兄弟节点，所以我们这个摄影摄像的兄弟节点是其他当我们便利的摄影摄像以后，也就是找到我们进入的这个节点的负节点，它的所有子节点我们便历到摄影摄像，我们可以看一下我们现在遍历到摄影摄像了，遍历到摄影摄像以后呢，那摄影摄像它的层级其实直接用level这个值我们就可以了，包括它所有的子节点，我们只需要遍历它里边的插的no，把每一个data塔里边的这个cant level的值跟它真正的所在的level进行一个同步就行了。那我们这块的代码呢，我就不这么来写了，这样呢，直接判断cat level其实是不合适的，那我们就应该判断dragon node，我们正前正在拖拽的这个节点的level，怎么知道它变化正在拖拽的这个节点的level，然后呢，跟我们正在遍历到我们的这个节点的level不一样，不一样。

我们把它复制过来。不一样。这样呢才是表示我们正在便利的，我们当前的这个节点跟它拖拽时的这个层级不一样，不一样的时候呢，我们就要改变当前节点的这个层级，而且这个层级我们也不用判断是什么了，因为在这一块全部都封装好了，我们只需要知道层级发生变化，我们就把当前节点的层级跟它真正的内容进行一个同步就行了，那我们这块的代码就应该是这么来写，我们修改当前节点的层级以及它子节点的层级，那当前节点的层级我来复制一下当前节点的层级，那就应该是，诶，这个是我们正在遍历的当前节点它的这个层级，它最新的层级。

负值，对这而它子节点的层级，我们既要修改每一个子节点的层级，还要将子节点的数据呢要收集起来，所以我们来写一个递归的方法，我们来改变子节点的层级，Update node node level。No，对，那这个方法呢，我们就应该写成这样，把你要改变哪个节点的所有子节点的层级，你把当前节点传过来，比如呢，我们现在当前的这个节点就是我们正在便利的。这个摄影摄像我要改变它的里边所有子元素的层级，那我们拿出它的差的no传过去，好，我们现在呢要修改，我们来调用这个方法，this.update。

我们来修改当前这个元素，好，就是它，我们正在遍历到它，那修改它里边所有子节点的层级，那怎么修改呢？我们只需要拿到这个node。CTRLC来复制来，我们拿到node里边的什么，Node里边有一个叫child noes，把它所有的子节点拿来，我们来变历，For，我们进行变历，Let I等于零到I小于我们这个长度，这个长度一直A加加，我们来变力，当变力的前提条件是要有这个路子，所以我们要判断一下，只要他的这个怒的。

节点的这个Les是大于零的，我们就可以进行遍历，那变历呢？我们拿到我们正在遍历的这个子节点，那就是nod chart no I。我们拿到它弄子，哎，那正在变历的子节点，那相当于就是这个它有超多子节点，子节点里边可能还有节点，只不过现在没有了，所以我们拿到这个node，我们要改它的层级，它的这里边的层级，比如这个元素，它的这个层级就应该是他现在真正所处的层级是这个LEVEL2，所以我们要做的就是拿到了当前的这个no的节点，把它里边的这个data。好，当前路的节点，它里边的这个data，这是它当前真正的数据。

C node current node和当前数据，当前数据呢，我拿到两个东西，当前里边我得知道改的是谁的层级，把它data里边的cat ID我拿来，这是它的cat ID，包括呢，它最新的层级是什么？我们给它改掉say node。他已经不是他原来所处的层级了，原来所的层级叫cat level，不是这个，而是什么呢？而是我们当前这个节点不是data，诶，Data里边封装的是数据库里原始数据，而是最新数里边的这个level层级，所以我们给他拿到这个LEVEL2个进行同步就行了，那最终我们要将这个要去进行更新，所以我this.update no们还要更新这些子节点的层级，我们给它里边push push什么呢？Push一个对象，我们要更新的ID cat ID，那就是它。

放到这，而要更新的层级can level是什么呢？那就是它。我们放到这儿。这是我们便利循环诶，来更新它的子节点的层级，而且这个子节点由于还有子节点，所以我们应该低估，我们继续调用this.update China node level，然后呢，将我们正在处理的这个节点又传进去，判断它如果还有子节点，继续来修改层级，所以我们在这就修改了它的这个层级，这是当前节点的层级，以及它所有子节点的层级，我来保存一下，我们看一下最终效果。把控制台清空，我们刷新一下整个页面。我们来改变一个层级，比如我们把手机通讯，手机通讯里边呢，有这么几个，我把手机通讯调到第一个位置走，然后我们要改的节点呢，有25个，这25个分别是什么？我们先来看一下第一个，第一个是225COUNT level是2225是什么？我们来看数据库，来找一下225SELECT。

行，From我们这张表，Where我们的cat ID等于225。我们来看一下225走，那225是手机，手机就是手机通讯里边的好，它的层级是二没问题，接下来呢，还有226，它的层级也是二，那226就应该还是它的子节点里边的东西好，226是对讲机，对讲机现在层级是二，那将来227应该还是2227。

这不是227叫1443 1443 1433 1433来走，1433是三生三世，它的层级还是二好没问题，相当于先把它的三个子节点的层级改掉了，接下来要改手机通讯的展开，它的ID是34 34是谁？34我们来运行，34是手机通讯，它原来的层级是二，而现在的层级我们看一下变成了一，包括它的负ID已经是根元素变成了零，它的排序也是零，前三个这是它的子节点，它真正的排序要跟它的这些同级来排，也是零，没问题，那我们所有的节点都准备好了。下一节课呢，我们就将所有的这些数据发给我们的后台进行更新。