标签: vue.draggable

我有一个场景，我有多个带有标题的容器，然后是将在 vue.draggable 和页脚上使用的列表。

我已经设法将列表部分放在多个容器之间进行拖放操作，但前提是我将它们放在容器的列表区域中。

我的理想情况是可以在整个容器中放置，这样我也可以在页眉/页脚中放置一个列表项（可能默认将其添加到列表的位置 0）。

我已经尝试在列表项和父 div 上创建额外的 vue.draggable 自定义标签，但它没有帮助，因为现在我们可以拖动整个父 div。

这是我拥有的几个容器的基础的 vue 模板：

<template>
  <div class="container">
    <div class="header">
      <p>{{header}}</p>
    </div>
    <div class="body">
      <draggable class="drag-area" :list="items" group="default">
        <div v-for="item in items" :key="item.id">
          <drag-item :item="item"></drag-item>
        </div>
      </draggable>
    </div>
    <div class="footer">
      <p>{{footer}}</p>
    </div>
  </div>
</template>

有什么办法可以将拖动项拖到整个容器中吗？即把它放在页眉/页脚中？

我正在使用 vue 2.6.10 和 vuedraggable 2.23.0

我正在使用 Vue.Draggable （https://github.com/SortableJS/Vue.Draggable）创建一种看板，它允许我将项目从一个列表拖动到另一个列表。我遇到的问题是，当我将一个列表项拖动到另一个列表的底部时，除非鼠标光标在拖动时触摸第二个列表中的项目，否则该项目不会添加到列表中。

我知道当你有一个空列表时，你可以设置 ':empty-insert-threshold' 来增加放置半径，以便更容易地将项目放入空列表中，但是有没有办法做到同样的事情，在列表的底部不为空？如果没有，是否可以添加一个占位符元素，允许用户轻松地将列表项拖放到列表底部？

我们发现许多用户本能地将新项目拖到列表底部，这就是为什么我们希望使此功能更好地发挥作用。

我一直在用头撞墙试图弄清楚这一点。我在这里通过 Sortable.js 库 repo 找到了一个几乎完全符合我想要做的示例，但我无法使用Vue.Draggable实现它。

我的理论是添加一个与其余元素<draggable/>相同group的元素并侦听其@add上的事件，然后从其列表中删除该拖动的元素。

一个问题（可能）是我试图将“垃圾箱”按钮指定为删除区域，如果它引用相同的 draggable group，则该拖动的元素将附加到按钮组并抛出整个 UI。所以，一件非常重要的事情是有某种用户反馈（例如，当拖动元素悬停时垃圾桶图标变成红色），但被拖动的元素不应该被插入到按钮组中。

初始拖动状态

预期的删除操作

提前致谢！

I'm seeking for a help with "Vue.Draggable". The second day I`m trying to update draggable array correctly.

The challenge is:

• update draggable array using computed set/get functions
• get draggable item properties including information about parent item and call axios function to update data on a MySQL.

Data sample:

{ cat1: { authors: [ { name: "Name 1" }, { name: "Name 2" } ] }, cat2: { authors: [ { name: "Name 3" }, { name: "Name 4" } ] …

我编写了一个在整个应用程序中共享的组件，在某些地方我需要拖动/排序，而有些地方不希望它在那里。我将 a 传递prop给我的组件调用disableDraggable并基于它应该禁用，不幸的是它没有做任何事情，我如何禁用可拖动？我应该注意到我尝试了 options 对象语法和 simple :disable，这是相关代码：

 <draggable v-model="copyOfQuestions" @end="$emit('updateQuestionsOrder', copyOfQuestions)" :options="{disable : disableDraggable}">  
// or :disable="disableDraggable"
      <v-card flat class="list_outer_block" v-for="q in questions" :key="q.question_id">
        <v-card-text class="pa-0">

          <v-layout justify-start align-center>
            <v-flex initial-xs px-2 py-3 class="handle minwdth-0" :title="$t('general.drag_for_reorder')">
              <v-icon class="text--secondary  text--lighten-3">$vuetify.icons.drag_indicator</v-icon>
            </v-flex>
    ....
        props: ['questions', 'disableDraggable'],

如何禁用可拖动功能？

我应该注意到vue-draggable（我正在使用的）据说与SortableJs

所以我正在努力开发一个迷你页面构建器。我正在处理以下代码：

JavaScript/Vue 代码：http://git.dannysmc.com/snippets/63 - 也粘贴在下面：

// Import Vue Data
import Vue from 'vue';
import $ from 'jquery';
import draggable from 'vuedraggable'

// Import page builder registry
import Registry from '../pagebuilder/registry.json';

// Import page builder components
import ComTextBlock from '../pagebuilder/com-text-block.vue';

// Setup new Vuex store
window.vm.content_pages_create = new Vue({
    el: '#content-pages-create',
    name: 'PageBuilder - Create',
    store: window.vm.store,
    components: {
        draggable,
        ComTextBlock,
    },
    data: {

        // Define pagebuilder registry
        registry: Registry,

        // Define the page content
        page: {
            elements: 0,
            rows: …

我已经阅读了我能找到的所有文档和 stackoverflow，但仍然遇到问题。

我正在使用 Vue 和 Rails 构建 Trello 克隆。

我有很多可拖动列表。

每个列表都有可拖动的卡片。

当我将一张卡从一个列表拖到第二个列表时，如何将其保留到我的 ajax Rails 端点？

我尝试过使用该@end方法和:move道具，但运气为零。

#app.vue
<template>
  <draggable v-model="lists" group='lists' class="row dragArea" @end="listMoved">
    <div v-for="(list, index) in lists" class="col-3">
      <h6>{{ list.name }}</h6>
      <hr />

      <draggable v-model="list.cards" group='cards' class="dragArea" :move="cardMoved">
        <div v-for="(card, index) in list.cards" class="card card-body mb-3">
          {{ card.name }}
        </div>
      </draggable>

      <div class="card card-body">
        <input v-model="messages[list.id]" class="form-control" ></input>
        <button v-on:click="submitMessages(list.id)" class="btn btn-secondary">Add</button>
      </div>
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default { …