Блог

Я пытаюсь выполнить постоянную сортировку карточек с помощью 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…

Затем, как только я это выясню, мне нужно расположить узлы на монтируемых узлах с позиционированием nodesort для начального состояния перетаскиваемых элементов vue. Любая помощь приветствуется. Спасибо

Мне удалось сохранить положение каждого узла в нужном месте следующим образом

     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 })
          }
        }
      }
    },

 

Но то, что я хочу сделать, это при смонтированном / при обновлении присвоить перетаскиваемым элементам в списке правильную позицию (индекс) на основе базы данных — я не вижу, как я получаю к этому доступ, чтобы сделать его динамическим, я думал, что идентификатор данных, но я не уверен, к какому элементу это привязано