问题标签 [multi-drag]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
1033 浏览

vue.js - 单击其中一个子元素时如何防止选择 SortableJS 项目?

问题

我正在使用SortableJS构建一个可拖动的树组件。这意味着我的每个sortable-items 都有一个toggle-arrow作为打开和关闭 a 的子元素sub-tree(如果有的话)。

如果单击,我正在尝试使用stopPropagation()来阻止选择父级,但它不起作用。sortable-itemtoggle-arrow

关闭时是这样的: 在此处输入图像描述

打开时看起来像这样: 在此处输入图像描述

您在打开状态下看到的蓝色突出显示(第二张图片)是我在使用插件selectedClass时为选项选择的样式。multiDrag

这说明当我单击toggle-arrow它会导致父级sortable-item被选中。

我不希望这种情况发生。

编码

我的 SortableJS 树组件中的项目代码如下所示(使用 Vue.js 和 Pug 语法):

然后我有一个处理我的元素@click绑定的处理程序:toggle-arrow

您可以看到我声明@click.stop为事件绑定,这应该阻止click事件从toggle-arrow子元素冒泡,但它不起作用。

我什至试图$event.stopPropagation在处理程序中使用。但是,事件似乎继续冒泡,因此父sortable-item元素最终处于选定状态。

我也尝试过声明@click.native.stop为事件绑定,但它只是阻止我的toggleTree方法触发。我假设在某处有另一个事件处理程序SortableJS干扰@click.native.stop绑定。

问题

  1. 单击my 的子元素时,如何停止事件的传播sortable-item

  2. multiDrag插件如何处理选择?我仔细研究了代码,发现该事件是在 的事件select处理程序中触发dropsortable-item,但我对此感到困惑。为什么要drop使用事件处理程序来切换 a 的选择sortable-item

在此先感谢您提供的任何信息。

0 投票
3 回答
3683 浏览

vue.js - SortableJS / Vue.Draggable 多拖选项不起作用

最近我发现SortableJS / Vue.Draggable库(https://github.com/SortableJS/Vue.Draggable)有一个新选项,可以启用多重拖动以从数组中选择多个元素并将它们一起移动(https://github.com/SortableJS/Vue.Draggable/pull/744)。

我已经看到了可以完美运行的示例,例如:

但是当我尝试在我的项目中使用它时,我只能找到让它工作的方法。

以下是我的项目的详细信息:

  • Vue:2.6.10
  • 可拖动:2.23.2

在我的 vue 组件中,我以这种方式导入了 vuedraggable:

我已经应用了这种方式(为此帖子的目的已减少代码):

我已经注意添加了select-classSortableJS / Vue.Draggable 文档中使用多拖动选项所需的属性。

打印为可拖动列表的对象位于此 JSON 结构下:

尽管做了所有这些努力,我还是无法让它发挥作用。我什至必须根据我之前找到的一个 codepen 复制一个更精简的代码版本,并且它可以工作(https://codepen.io/Juan-Sin-Miedos/pen/jOWOyWW

为什么它不适用于我的项目?

任何帮助将不胜感激,非常感谢!

0 投票
0 回答
69 浏览

reactjs - 找不到具有多重拖动和拖动所有选定项目的 dnd 组件

在我的要求下找不到 dnd 组件 https://react-beautiful-dnd.netlify.app/?path=/story/multi-drag--pattern 这个组件很完美,但是拖动时,我需要所有元素被选中,而不仅仅是一个,就像这里 https://nikhilbaradwaj.github.io/ReactMultiDnD/ 也许有人看到了这样的解决方案?