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包裹。

但是，在您的情况下，可拖动的唯一子项是无序列表，它是您打算可拖动的元素列表的父级。

只需取消注释可拖动标签周围的颜色列表即可。

        <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组件，并将组参数设置为与包含颜色的可拖动组件相同的值，然后覆盖 @end或@remove方法，这样当您将颜色从颜色列表移动到第二个可拖动区域，将从第一个列表中删除的颜色复制回该区域（这很容易破解）

或者您可以像这样简单地使用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>

vue.draggable拖动错误元素

1 个答案: