vue.draggable перетаскивает неправильный элемент

Я пытаюсь изменить порядок цветов в палитре с помощью DnD. Ручка находится здесь: - https://codepen.io/neon22/project/editor/XbqvYe

<script type="text/x-template" id="cpalette">
  <div>
    <draggable v-model="colors" class="dragArea">
        <ul class="color-list" >
            <input type="hidden" :name="inputId" :id="inputId" v-model="colors">
            <li v-if="emptyOption">
                <a class="noColor" v-if="emptyOption !== 'true'" href="" @click.prevent="setColor();" :title="emptyOption === 'true' ? '' : emptyOption" :class="{selected: !selectedColor && !noSelection}"></a>
            </li>
          <!-- <draggable v-model="colors" tag='li' class="dragArea"> -->
            <li v-for="color in colors" :key="color.id" :data-id="color.id" >
                <a href="" :style="{background: color.hex}" :title="color.stash" @click.prevent="setColor(color.hex, color.id, color.stash)" :class="{selected: selectedColor === color.hex}"></a>
            </li>
          <!-- </draggable> -->
        </ul>
    </draggable>
  </div>
</script>

т.е. Я переупорядочиваю в том же массиве. (Я также хочу разрешить сбрасывать его в отдельный регион для копирования и т. д.). Вместо этого я могу перетаскивать всю UL, но не отдельные элементы li. Я уже некоторое время баловался с этим и запутался. Я вижу, как классы меняются в chrome dev, поэтому я думаю, что это почти работает. Может вход мешает?

Я пытаюсь получить такой конечный результат: - https://sortablejs.github.io/Vue.Draggable/#/transition-example-2, но я еще не добавил группу перехода.

Я также хочу иметь возможность перетаскивать отдельные цвета во вторую область (где @dropend скопирует их и т. д. и т. д.). На самом деле, если я смогу лучше управлять перетаскиванием, то, возможно, я бы сделал удаление корзина вместо кнопки.

Поэтому я хочу изменить порядок отдельных цветов и включить отдельную цель перетаскивания.

Любая помощь будет принята с благодарностью. Я уверен, что это что-то простое :(


vue.js color-palette vue.draggable
person Neon22    schedule 10.12.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Элементы, которые вы собираетесь перетаскивать, должны быть прямыми дочерними элементами компонента draggable или обернутыми вокруг компонента transition-group.

Но в вашем случае единственным дочерним элементом draggable является неупорядоченный список, который является родителем списка элементов, которые вы собираетесь перетаскивать.

Просто раскомментируйте перетаскиваемый тег вокруг списка цветов.

        <ul class="color-list" >
            <input type="hidden" :name="inputId" :id="inputId" v-model="colors">
            <li v-if="emptyOption">
                <a class="noColor" v-if="emptyOption !== 'true'" href="" @click.prevent="setColor();" :title="emptyOption === 'true' ? '' : emptyOption" :class="{selected: !selectedColor && !noSelection}"></a>
            </li>
          <draggable v-model="colors" class="dragArea" group="color-stuff">
            <li v-for="color in colors" :key="color.id" :data-id="color.id" >
                <a href="" :style="{background: color.hex}" :title="color.stash" @click.prevent="setColor(color.hex, color.id, color.stash)" :class="{selected: selectedColor === color.hex}"></a>
            </li>
          </draggable>
        </ul>

Теперь о возможности перетаскивания цветов в новую область для копирования или удаления:

Проблема с sortable (на которой основан vue draggable) заключается в том, что вы можете перетаскивать элементы в сортируемом списке внутри списка (чтобы изменить порядок) или вы можете переместить элемент в другой сортируемый список в той же группе.

Таким образом, вы можете либо создать еще один компонент draggable с параметром группы, установленным на то же значение, что и перетаскиваемый компонент, содержащий цвета, а затем переопределить методы @end или @remove, чтобы при перемещении цвета из списка цветов во второй перетаскиваемая область, цвет, удаленный из первого списка, копируется обратно в нее (что довольно хакерски)

или вы можете просто использовать перетаскивание HTML5 следующим образом:

<draggable v-model="colors" tag='li' class="dragArea">
    <li v-for="color in colors" 
        :key="color.id" 
        :data-id="color.id" 
        draggable='true'        
        @dragstart="functionToHandleDragStart" 
    >
          <a href="" 
        :style="{background: color.hex}" 
        :title="color.stash" 
        @click.prevent="setColor(color.hex, color.id, color.stash)" 
        :class="{selected: selectedColor === color.hex}"
          >
          </a>
    </li>
</draggable>

<div
    @drop="functionToHandleDrop"
    @dragover="(event)=>{event.preventDefault()}"
>
        <p> drop target </p>

</div>
person yeshvvanth    schedule 10.12.2019
comment
Ааа, я вижу о прямом потомке, но когда я это делаю, все предметы исчезают. Мне тоже нужна настройка css. И мне придется добавить (ту же группу), которую можно перетаскивать, над v-if, чтобы захватить другой дисплей. Ручка настроена... - person Neon22; 10.12.2019
comment
Да, элементы исчезли, потому что в css стиль цветов был определен для определенного предка, то есть .color-item > li > a . Если вы добавите еще один элемент перетаскивания из той же группы и перетащите его к нему, цвета будут переданы в новый элемент перетаскивания, и вам нужно отменить это с помощью обратного вызова @end или @remove. Я бы предложил вместо этого использовать перетаскивание html. - person yeshvvanth; 11.12.2019