Блог

Просто интересно, есть ли способ отключить перетаскивание вложенного элемента в перетаскиваемом vue

Я нашел способ удалить вложенный перетаскиваемый элемент, когда для элемента установлено значение false, что позволяет мне использовать некоторые элементы в качестве групп, когда sub=true, а другие элементы в качестве элементов, которые могут быть объединены в группы, когда sub=false.

(подраздел предназначен для : имеет подгруппу)

Но теперь у меня есть проблема, что я могу объединять группы в группы, и я хочу избежать этого. Поэтому мне было интересно, есть ли способ отключить отбрасывание, если для обоих элементов установлено значение true или любым другим способом?

Мой код на данный момент:

 lt;templategt; lt;draggable    @start="drag = true"  @end="drag = false"  :list="tasks"  tag="div"  :group="{ name: 'g1', put: true }"  class="item-container"  gt;  lt;div  :class="el.sub?'item-group my-2':'my-2'"  v-for="el in tasks"  :key="el.name"  gt;  lt;v-card class="pa-2"gt;  lt;pgt;{{ el.name }}lt;/pgt;  lt;/v-cardgt;  lt;nested-draggable  class="item-sub"  :tasks="el.tasks"  v-if="el.sub"  /gt;  lt;/divgt;  lt;/draggablegt; lt;/templategt;  

 lt;scriptgt; import draggable from "vuedraggable"; export default {  name: "nested-draggable",  props: {  tasks: {  required: true,  type: Array  }  },  components: {  draggable  },  data() {  return {  drag: false,  }  },   } lt;/scriptgt;  

here is the list of tasks I’m sending into the props :

 list: [  {  name: "task 1",  sub: true,  tasks: [  {  name: "task 2",  tasks: [],  sub: false,  }  ]  },  {  name: "task 3",  sub: true,  tasks: [  {  name: "task 4",  tasks: [],  sub: false,  }  ]  },  {  name: "task 5",  sub: true,  tasks: []  }  ]