Vue.js vue.draggable拖动错误的元素

我正在尝试使用DnD对调色板中的颜色进行重新排序。 潘在这里： -

也就是说，我在同一个数组中重新排序。（我还希望能够将其放入单独的区域进行复制等）。 相反，我可以拖动整个UL元素，但不能拖动单个li元素。我已经和它玩了一段时间了，把自己弄糊涂了。我可以在chrome开发中看到类的变化，所以我认为它几乎可以工作。 也许是输入的东西挡住了路

我试图得到这样的最终结果： - 但我还没有添加过渡组

我还希望能够将各个颜色放入第二个区域（在那里@dropend将复制它们等等）。事实上，如果我能更好地抓握draggable，那么我可能会使用删除垃圾桶而不是按钮

所以我想重新排列各个颜色，并启用一个单独的放置目标

---

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

您想要拖动的元素应该是

可拖动组件的直接子元素，或者用
转换组包装

但在您的例子中，可拖动的唯一子元素是无序列表，它是您希望可拖动的元素列表的父元素

只需在颜色列表周围取消可拖动标记的注释








现在，关于启用将颜色拖动到新区域以进行复制或删除：

这件事
（vue Dragable所基于的）是您可以在其中拖动项目
列表中的可排序列表（要重新排序）或
您可以将项目移动到中的另一个可排序列表
同一组

因此，您可以创建另一个
draggable
组件，将group参数设置为与包含颜色的可拖动组件相同的值，然后覆盖
@结束或@remove方法，以便在将颜色从颜色列表移动到
第二个可拖动区域，从第一个列表中删除的颜色将被复制回该区域（这非常粗糙）

或者，您可以简单地使用如下：




下降目标

您想要拖动的元素应该是
可拖动
组件的直接子元素，或者用
转换组
包裹

但在您的例子中，可拖动的唯一子元素是无序列表，它是您希望可拖动的元素列表的父元素

只需在颜色列表周围取消可拖动标记的注释








现在，关于启用将颜色拖动到新区域以进行复制或删除：

这件事
（vue Dragable所基于的）是您可以在其中拖动项目
列表中的可排序列表（要重新排序）或
您可以将项目移动到中的另一个可排序列表
同一组

因此，您可以创建另一个
draggable
组件，将group参数设置为与包含颜色的可拖动组件相同的值，然后覆盖
@结束或@remove方法，以便在将颜色从颜色列表移动到
第二个可拖动区域，从第一个列表中删除的颜色将被复制回该区域（这非常粗糙）

或者，您可以简单地使用如下：




下降目标

Ahh我看到了直接子项，但当我这样做时，所有项都消失了。我也必须进行css调整。我必须添加一个（相同组）可拖动到v-if上方以捕获另一个显示框。笔已调整…是的，项目消失，因为在css中，颜色的样式是为特定的场景定义的，即
。颜色项目>li>a
。如果添加同一组的另一个拖动框并拖动到其中，则颜色将转移到新的拖动框中，您需要使用@end或@remove回调来扭转这种情况。我建议您使用html拖放。啊，我看到了直接子项的情况，但当我这样做时，这些项都消失了。我还必须进行css调整。我必须添加一个（相同的组）可拖动到v-if上方以捕获另一个显示框。笔已调整…是的，项目消失，因为在css中，颜色的样式是为特定的场景定义的，即
。颜色项目>li>a
。如果添加同一组的另一个拖动框并拖动到其中，则颜色将转移到新的拖动框中，您需要使用@end或@remove回调来逆转这种情况。我建议您使用html拖放。
<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>