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 但我还没有添加过渡组。

我还希望能够将单个颜色拖放到第二个区域（@dropend 将复制它们等等......）事实上，如果我能更好地控制可拖动，那么也许我会做一个删除垃圾桶而不是一个按钮。

所以我想重新排序单个颜色并启用单独的放置目标。

任何帮助将不胜感激。我敢肯定它很简单:(

Answer 1

您打算可拖动的元素应该是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 组件，并将 group 参数设置为与包含颜色的可拖动组件相同的值，然后覆盖 @end 或 @remove 方法，以便当您将颜色从颜色列表移动到 第二个可拖动区域，从第一个列表中删除的颜色被复制回它（这很hacky）

或者你可以像这样简单地使用Html5 Drag and Drop：

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