Как я могу установить фиксированный элемент рядом с перетаскиваемым списком vue

Question

Я пытаюсь отобразить список перетаскиваемых элементов, используя vue-draggable, которые иногда разделяются фиксированным элементом в данной позиции.

До сих пор я пробовал следующий подход: создание другого элемента при необходимости внутри v-for петля.

<draggable :list="list" class="dragArea" :class="{dragArea: true}" 
           :options="{group:'people', draggable: '.drag'}" @change="handleChange">
    <template v-for="(element, index) in list">
      <div class="drag">
        {{element.name}}
      </div>
      <div class="nodrag" v-if="index === 2">Fixed element</div>
    </template>
</draggable>

Тем не менее, это нарушает поведение моего приложения, так как индексы, возвращаемые onChange событие не то, что ожидается больше. (Вы можете проверить воспроизведение на этом jsfiddle)

Я делаю это неправильно? Я также рассмотрел использование move prop, чтобы отключить возможность перетаскивания, как предложено здесь, но проблема остается, потому что я использую элемент вне перетаскиваемого списка, я верю.

В нашем производственном сценарии индекс фиксированного элемента является переменным, если это имеет значение.

Answer 1

Ты можешь использовать moveв твоей draggableкомпонента, а затем указать, какие элементы будут fixed. Что-то вроде этого:

      <draggable
  :list="list"
  :disabled="!enabled"
  class="your_class"
  :move="checkMove"
  @start="dragging = true"
  @end="dragging = false"
>
...
</draggable>

...........

data() {
  return{
    list: [{foo: "bar", ..., fixed: true}, {foo: "bar", ...}, {foo: "bar", ...}, {foo: "bar", ..., fixed: true}]
  }
}

...........

methods: {
  checkMove(e) {
    return !this.list[e.draggedContext.futureIndex].fixed
  }
}

Answer 2

Проблема в том, что вам нужно включить ваши "фиксированные элементы" в качестве данных в массив, который вы передаете в Vue.Draggable... Вы также не можете иметь v-if потому что SortableJS будет считать их как элемент, даже если они не видны, потому что VueJS оставляет невидимые элементы с v-if как комментарии... SortableJS будет индексировать эти комментарии. Поэтому добавьте элемент в ваш массив после John3 и избавьтесь от v-if.. вместо этого добавьте draggable свойство в ваших объектах и ​​только установить 'drag' класс, если этот элемент имеет draggable свойство установлено в true. Последняя проблема заключается в том, что Sortable не будет индексировать элемент, который нельзя перетаскивать, но это, вероятно, будет исправлено в более позднем обновлении. Я рекомендую вам использовать filter вариант на данный момент.

Пример (не используется filter): https://jsfiddle.net/3wrj07et/5/