防止在 vuedraggable 中的特定列表上拖动

问题描述

所以我用两个 draggable 调用包装了以下模态，在顶部 draggable 项目中，我正在拖动 button。有什么办法可以防止物品被拖动？我希望他们能够对列表中的项目进行排序，但不能将它们拖到“可用”列表中，因此防止按钮甚至无法被拖动。

代码如下：

<div id="o365-modal-edit-wrapper">
    <div class="columns">
        <div class="column is-half-desktop is-full-mobile buttons">
            <div class="is-size-5 has-text-left">Selected Apps</div>
            <hr class="mt-1 mb-3">
            <draggable class="list-group"
                       v-model="list.selected"
                       v-bind="dragOptions"
                       :list="list.selected"
                       :move="onMove"
                       :group="{put: true}"
                       :options="{handle:'.level-left'}">
                <p v-if="!list.selected || !list.selected.length"><i>No selected applications. To add an application,drag it into this column or click the green plus.</i></p>
                <button class="button is-fullwidth is-flex list-group-item o365_app_handle level is-mobile" v-for="(app,index) in list.selected" :key="app.id">
                    <div class="level-left is-flex-grow-1">
                            <span class="icon" aria-hidden="true">
                                <img :src="app.icon_url" />
                            </span>
                        <span>{{app.name}}</span>
                    </div>
                    <div class="level-right is-flex-grow-0">
                        <span class="icon has-text-danger is-clickable" @click="remove(index)">
                          <i class="fas fa-times"></i>
                        </span>
                    </div>
                </button>
            </draggable>
        </div>
        <div class="column is-half-desktop is-full-mobile buttons">
            <div class="is-size-5 has-text-left">Available Apps</div>
            <hr class="mt-1 mb-3">
            <draggable class="list-group"
                       v-model="list.available"
                       v-bind="dragOptions"
                       :list="list.available"
                       :move="onMove"
                       :group="{put: false}"
                       :options="{handle:'.level-left'}">
                <button class="button is-fullwidth is-flex list-group-item o365_app_handle level is-mobile" v-for="(app,index) in list.available" :key="app.id">
                    <div class="level-left is-flex-grow-1">
                        <span class="icon" aria-hidden="true">
                            <img :src="app.icon_url" />
                        </span>
                        <span>{{app.name}}</span>
                    </div>
                    <div class="level-right is-flex-grow-0">
                        <span class="icon has-text-primary is-clickable" @click="add(index)">
                          <i class="fas fa-plus"></i>
                        </span>
                    </div>
                </button>
            </draggable>
        </div>
    </div>
</div>

示例如下：如您所见，我仍然可以拖动 button 但无法放下它，我该如何防止“已选择”列表按钮完全无法拖动？感谢所有帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）