javascript - 防止在 vuedraggable 中拖动特定列表

Question

所以我用两个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但不能放下它，我怎样才能完全阻止“选定”列表按钮被拖动？感谢所有帮助！