vue.draggable拖动错误元素

Question

我正在尝试使用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，但我还没有添加转换组。

我还希望能够将单个颜色放到第二个区域(@下拉列表将复制它们等等)。事实上，如果我能更好地抓取拖动，那么也许我会做一个删除垃圾桶，而不是一个按钮。

因此，我想重新排序个别的颜色，并启用一个单独的删除目标。

任何帮助都将不胜感激。我相信这很简单：

Answer 1

您想要拖放的元素应该是draggable组件的直接子元素，或者使用transition-group包装。

但在您的示例中，拖放的唯一子元素是无序列表，它是要拖放的元素列表的父元素。

简单地取消评论周围的颜色列表可拖标签。

        <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>

现在，有关启用将颜色拖到新区域以便复制或删除：

使用可排序 ( vue可拖动的基础)是，您可以在列表中拖动可排序列表中的项(以重新排序)，也可以将项目移动到同一组中的另一个可排序列表。

因此，您可以创建另一个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>