vue.항목의 불변적이고 지속적인 위치.

vue.항목의 불변적이고 지속적인 위치.

vue.dragable을 사용하여 영구적인 카드 정렬을 시도하고 있습니다. 마운트된 상태에서 주문하는 작업을 아직 수행하지 못했으며 모든 노드의 인덱스를 업데이트하는 데 어려움을 겪고 있습니다.

내가 부를 때마다.

 <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를 듣고 나서 그들이 모든 드래그 가능한 항목의 인덱스를 저에게 주세요. 그리고 나서 저는 그것을 디스패치에 루프할 수 있습니다.또한 올바른 노드 ID를 업데이트해야 합니다.

그런 다음 문제가 해결되면 노드 정렬이 탑재된 노드에 값 드래그 게이블 초기 상태를 위한 배치를 정렬해야 합니다.도움을 주시면 감사하겠습니다.감사해요.

각 노드의 위치를 다음과 같이 올바른 위치에 저장할 수 있었습니다.

    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라고 생각했지만 이것이 어떤 요소에 연결되어 있는지 잘 모르겠습니다.

언급URL : https://stackoverflow.com/questions/65311544/vue-draggable-and-persistant-positions-of-items