如何解决防止在 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 举报,一经查实,本站将立刻删除。