Vue Draggable Второй список не сохраняет сортировку

Question

Я получаю список новых заказов и отображаю их по вертикали в столбце A. Во втором столбце B отображается текущий список приоритетов, упорядоченный по желанию отдельных лиц. Когда я перетаскиваю элемент из столбца A в столбец B, он перемещает элемент, и это хорошо. Тем не менее, он просматривает правильно, но при удалении новый элемент ВСЕГДА переходит в конец столбца B.

Я использую этот компонент, чтобы получить функциональность перетаскивания.

Вот пример / доказательство того, о чем я говорю.

Даже если элементы находятся в столбце B, и я хочу перетащить их в этот столбец, они хорошо выглядят, но не остаются при отпускании кнопки мыши.

Я могу исправить эту проблему внутренней сортировки с помощью следующего кода (хотя я полагаю, что это должно быть то, что код делает без меня внося изменения.):

На перетаскиваемом добавить следующий обработчик событий:

v-on:end="end"

И в коде JS поймайте событие:

end(e) {
  this.prioritizedNewOrders.splice(e.newIndex, 0, this.prioritizedNewOrders.splice(e.oldIndex, 1)[0]);
}

Это все еще не исправляет начальное перетаскивание в столбец B.

ОТВЕТ@sphinx ответ правильный! Вот обновленная скрипка с ответом.

Answer 1

Посмотрите на Vue-Draggable: слот,

Используйте слот нижнего колонтитула, чтобы добавить не перетаскиваемый элемент внутри компонента vuedraggable.

Важно: его следует использовать вместе с параметром перетаскивания, чтобы пометить перетаскиваемый элемент. Обратите внимание, что слот нижнего колонтитула всегда будет добавлен после слота по умолчанию.

Так добавь slot="footer" и поставить его после слота по умолчанию, затем работает нормально.

Vue.config.productionTip = false
new Vue({
  el: "#app",
  data: {
    todos: [
      { id: 1, text: "Learn JavaScript", done: false },
      { id: 2, text: "Learn Vue", done: false },
      { id: 3, text: "Play around in JSFiddle", done: true },
      { id: 4, text: "Build something awesome", done: true }
    ],
    newTodos: []
  },
  methods: {

  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>

<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>

<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>

<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>

<div id="app">

<p><i>Drag things from the "New Orders" list to the "Prioritized Orders" list. You will see that they sort fine while they are in the New Orders list.  But when you drag them to be a certain location (not the last spot) on the Prioritized Order list, they ALWAYS jump to the bottom.  Even though you can "See" that they will show up where you want them until you let go of the mouse.</i></p><br />
<p>
<i>Also, sorting works great in the New Orders list.  But once items are in the Prioritized list, they show that it will look good until you let go of the mouse.</i>
<br /><br />Adding this code to the "end" event will fix the sorting.  But IMHO, this should work without ME coding anything:<br /><br />
<div style="font-family: 'courier-new'">
this.prioritizedNewOrders.splice(e.newIndex, 0, this.prioritizedNewOrders.splice(e.oldIndex, 1)[0]);
</div>
</p><br />
<!-- New Items -->
<div class="d-flex justify-content-between">
 <b>New Orders - Not yet Prioritized</b>
 <label>{{ todos.length }}</label>
</div>

<draggable v-model="todos"
      v-bind:options="{ group: { name: 'Orders', pull: true } }">
 <div style="border: 1px solid #ccc; margin-bottom: 3px;"
    v-for="o in todos"
    v-bind:key="o.id">
  <div style="padding: 1rem;">
   <label>{{ o.text }}</label><br />
   <label>{{ o.done }}</label>
  </div>
 </div>
</draggable>

<!-- Ordered Queue -->
<br />
<div>
 <b>Prioritized Orders Queue</b>
 <label>{{ newTodos.length }}</label>
</div>

<div class="prioritized-new-orders" style="border: 1px solid #ccc; background-color: #eee;">
 <draggable v-model="newTodos"
       v-bind:options="{ group: { name: 'Orders', put: true }, animation: 250 }">
  <div style="border: 1px solid #ccc; margin-bottom: 3px;"
     v-for="o in newTodos"
     v-bind:key="o.id">
   <div style="padding: 1rem;">
    <label>{{ o.text }}</label><br />
    <label>{{ o.done }}</label>
   </div>
  </div>
  <p slot="footer" class="text-info p-3 mb-0" v-if="newTodos.length === 0">Drag and Drop New Orders from the left column here to Prioritize them.</p>
 </draggable>
</div>

</div>