项目的 vue.draggable 和持久位置答案

【问题标题】：vue.draggable and persistant positions of items项目的 vue.draggable 和持久位置
【发布时间】：2021-03-26 10:08:02
【问题描述】：

我正在尝试使用 vue.draggable 对卡片进行持久性排序，但我还没有在挂载上进行排序，而且我有点难以更新所有节点的索引

在可拖动时我调用

 <draggable
      class="grid"
      name="grid"
      @start="drag = true"
      @end="drag = false"
      @update="nodePositionIndex"
    >
      <div v-for="(nodes, index) in $options.myArray" v-bind:key="index">

...

    nodePositionIndex(e) {
      console.log(e.newIndex)
      console.log(e.oldIndex)

      nodeid = e.item.firstChild.firstChild.id
      nodesort = e.newIndex
      this.$store.dispatch('sortNode', { nodeid, nodesort })
    },

（仅供参考，我的可拖动项目称为节点）

以上内容可以很好地使用正确的 newIndex 位置更新正确的节点，但是当然所有其他节点现在也具有 newIndex 位置，但我不确定我可以在哪里捕获该信息以便使用所有其他 newIndex 更新数据库?我觉得在我听到@update 之后我需要说嘿，请给我所有可拖动项目的所有索引，然后我可以将其循环到调度中......但我还需要确保更新正确的 nodeid。 ..

然后，一旦我解决了这个问题，我需要在安装节点上安排节点，并为 vue draggables 初始状态设置 nodesort 定位。任何帮助表示赞赏。谢谢

【问题讨论】：

标签： javascript vue.js vuex vue.draggable

【解决方案1】：

我已经设法将每个节点的位置存储在正确的位置，如下所示

    nodePositionIndex() {
      var i
      var j
      var dragger = document.getElementById('dragger')

      for (i = 0; i < dragger.childNodes.length; i++) {
        var count = i

        for (j = 0; j < Object.keys(this.configPositions).length; j++) {
          if (
            dragger.childNodes[i].firstChild[0].id ==
            this.configPositions[j].node_id
          ) {
            nodeid = this.configPositions[j].node_id
            nodesort = count
            this.$store.dispatch('sortNode', { nodeid, nodesort })
          }
        }
      }
    },

但是我想做的是在挂载/更新时根据数据库为列表中的可拖动项目分配正确的位置（索引）-我看不到如何访问它以使其动态化我认为是 data-id 但是我不确定这是附加到哪个元素

【讨论】：