Перетащите элемент, но отбросьте массив других элементов. - PullRequest
Новая
       44

Перетащите элемент, но отбросьте массив других элементов.

0 голосов
/ 12 февраля 2019

Я использую библиотеку Vue.Draggable , основанную на библиотеке SortableJS .

В моем коде у меня есть 2 перетаскиваемых списка, но у меня естьтретий, который не объединен с простыми элементами.

Третий список содержит массив объектов с записью конечной точки в каждом, и когда я отбрасываю свой элемент, я хочу сделать функцию, которая получает массив объектовиз конечной точки и объедините его с целевым списком. 

var vm = new Vue({
  el: "#main",
  data: {
    list: [{
      name: "John"
    }, {
      name: "Joao"
    }, {
      name: "Jean"
    }],
    list2: [{
      name: "Juan"
    }, {
      name: "Edgard"
    }, {
      name: "Johnson"
    }],
    list3: [{
      name: "First",
      endpoint: 'http://api.com/first'
    }, {
      name: "Second",
      endpoint: 'http://api.com/second'
    }, {
      name: "Third",
      endpoint: 'http://api.com/third'
    }]
  },
  methods: {
  	getAllTheFirstNames (evt) {
    	// i want to do something like this
      axios.get(evt.elementDragged.endpoint)
      	.then(res => {
        	evt.dropList.add(res.data /* res.data is an array of names */)
        })
    },
  
    add: function() {
      this.list.push({
        name: 'Juan'
      });
    },
    replace: function() {
      this.list = [{
        name: 'Edgard'
      }]
    }
  }
});
.normal {
  background-color: grey;
}

.drag {
  background-color: green;
}

.dragArea {
  min-height: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"></script>
<div id="main">
  <h1>Vue Draggable</h1>           
  <div class="drag">
    <h2>List 1 Draggable</h2>
    <draggable v-model="list" class="dragArea" :options="{group:'people'}">
      <div v-for="element in list">{{element.name}}</div>
    </draggable>

    <h2>List 2 Draggable</h2>
    <draggable v-model="list2" class="dragArea" :options="{group:'people'}">
      <div v-for="element in list2">{{element.name}}</div>
    </draggable>

    <h2>List 3 Draggable</h2>
    <draggable v-model="list3" class="dragArea" :options="{group:'people'}" @end="getAllTheFirstNames">
      <div v-for="element in list3">{{element.name}}</div>
    </draggable>
  </div>
</div>

Вот скрипка

1 Ответ

0 голосов
/ 14 февраля 2019

Для тех, у кого похожая проблема, вот решение.

Сначала вам нужно поработать с событием @end, затем в своем методе вы можете получить идентификатор перетаскиваемого элемента с помощьюдоступ к атрибуту, который вы инициализируете в своем v-for, в моем случае это был data-id, поэтому я мог получить к нему доступ так: 

let id = evt.item.dataset.id

Теперь, когда у вас есть свой идентификатор в вашей функции, вы можетеполучите массив объектов с помощью API.

Далее вам нужно добавить массив, который вы только что восстановили, во второй список с правильным индексом, для этого вам нужно получить целевой индекс второгоперечислите и передайте его с вашим массивом: 

let index = evt.newIndex
this.secondList.splice(index, 0, ...myArray)

Последний шаг, вам нужно очистить второй список, потому что там будет и начальный перетаскиваемый элемент, для меня я просто сделал цикл, и если я не сделалнайти определенный атрибут в одном из объектов, это означает, что он должен быть удален, но вы можете думать о чем угодно.

Вот весь код: 

<draggable
    v-model="firstList"
    :clone="clone"
    :options="options"
    @end="onEnd">
    <div
        v-for="c in firstList"
        :key="c.id"
        :data-id="c.id">
    </div>
</draggable>

...

onEnd (evt) {
    const id = evt.item.dataset.id
    HTTP.get(`/${id}/getMyArray`)
        .then(res => {
            let myObjects = JSON.parse(res.data) // => [{...}, {...}, ...]
            let index = evt.newIndex
            this.secondList.splice(index, 0, ...myObjects)
        })
}
...