时间戳

首页 > 解决方案 > 项目的 vue.draggable 和持久位置

javascript - 项目的 vue.draggable 和持久位置

问题描述

我正在尝试使用 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 可拖动初始状态。任何帮助表示赞赏。谢谢

标签： javascriptvue.jsvuexvue.draggable

解决方案

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

    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 但我不是确定它附加到哪个元素

推荐阅读