1

我正在尝试使用 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 将复制它们等等......）事实上，如果我能更好地控制可拖动，那么也许我会做一个删除垃圾桶而不是按钮。

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

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

4

1 回答 1

0

您打算可拖动的元素应该是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是基于）的事情 是您可以在列表中的可排序列表中拖动项目（以重新排序），或者您可以将项目移动到同一组中的另一个可排序列表。

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

或者您可以像这样简单地使用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>
于 2019-12-10T10:04:05.277 回答