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

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

0 голосов
/ 13 ноября 2018

Я пытаюсь отобразить список перетаскиваемых элементов, используя 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 для отключения возможности перетаскивания, как предлагалось здесь , но проблема остается, потому что я использую элемент вне перетаскиваемого списка, как мне кажется.

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

1 Ответ

0 голосов
/ 27 декабря 2018

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

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

...