问题标签 [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.

3 问题
Newest
Active
Bountied
318
Unanswered
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处理程序中触发drop的sortable-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/ 也许有人看到了这样的解决方案？


12345678910