问题标签 [dragula]

我正在使用 Dragula，我试图让我拖动的对象跟随我的光标。我将如何去做这件事。

编辑：也许值得注意的是这里的 html 是什么样的：

我通过调用 Polymer 内部的 ready 函数来初始化 Dragula：

EDIT2：
这是我尝试拖动某些东西时看到的图像：

左下角的内容是我每次拖动图像时看到的内容，并且无论我将元素拖动到何处，它都会保留在那里。那里没有元素或任何东西，文本只是出现在那里。

编辑3：

解决方案：

问题的原因是我没有正确导入dragula.css。如果其他人遇到此问题，我建议确保您已导入 dragula.css 并正确执行。

我正在使用 ReactJS 构建一个 Web 应用程序，并且在持久排序方面遇到了困难。该应用程序仅供公司使用，本质上是一个员工任务管理器（类似于Pivitol Tracker）。它管理 6 名员工，每个员工都有一个列，任务在垂直列表中沿着该列运行。

这个想法是允许对任务进行拖放排序，然后将其同步到服务器（使用PouchDB）并对所有正在运行的应用程序进行更改。我已经构建了 UI，并且每个功能（添加、编辑、删除等）都可以正常工作，但我无法弄清楚如何进行排序。

我正在构建每个任务：

然后我只需调用{tasks}我的 Render 函数来输出 html。

我发现了一个有趣的插件Dragula，它启用了拖放功能，但我需要一些关于如何使其持久化的想法。我试图捕获数组中任务 ID 的顺序，然后对返回的地图数据进行排序，但未成功。

我怎样才能完成这项任务？我对 ReactJS 比较陌生。

谢谢！

这个问题有点啰嗦，但我想让你确切地了解正在发生的事情......

我正在构建一个任务管理器桌面应用程序（Electron）供我们公司使用，并且发生了奇怪的行为。任务管理器有 6 列（每个员工一列），包含要完成的任务的垂直列表。它包括拖放功能，因此您可以对任务进行排序。

我使用Dragula来处理拖放部分，然后按从上到下的顺序收集所有任务的 ID 号，并将它们存储在一个数组中。

我正在使用PouchDB更新数据库并同步其他正在运行的应用程序。

对于 Dragula / PouchDB 方面，我使用以下代码：

此时，我的 TaskData 现在有了一个新的“order”键，其中包含所需的值。现在，我需要按顺序渲染 ReactJS 组件。

从 props 中获取任务（从 TaskData 刷新）并过滤掉需要的内容：

然后，我按上述订单号（使用 lodash.js）对任务进行排序，并将排序后的数据映射到 React 组件：

太好了，我的任务按顺序呈现，一切看起来都很好。

现在，问题...

当我拖放以将我的任务从["1", "2", "3", "4"]to重新排序时["4", "1", "2", "3"]，我实际上得到了["3", "4", "1", "2"]. 任务移动和更新（因为上面的 Dragula / PouchDB 代码）。奇怪...我输入开发工具location.reload()，令我惊讶的是，任务现在按我最初想要的顺序排列：["4", "1", "2", "3"].

再试一次，我将任务从["1", "2", "3", "4"]移至["1", "3", "2", "4"]，任务重置回["1", "2", "3", "4"]。再次，location.reload()任务现在已排序：["1", "3", "2", "4"].

在尝试调试时，我发现如果我禁用该_.sortBy功能，任务在被删除后会保持原状（尽管它们一开始就乱序）。任务移动到他们想要的位置并具有想要的订单号。

我还发现，如果我禁用 PouchDB.put()并继续_.sortBy工作，它也可以工作，但数据不会写入服务器，因此订单号不会更新。

也许我只是盯着代码太久了，但我无法弄清楚为什么任务会跳来跳去。有人有想法么？

谢谢你的帮助！

我正在尝试使用 Dragula js 创建一个部分，如下所示：

http://bevacqua.github.io/dragula/

我想要的是，拖放应该是动态的。这样在每次拖放时都应该保存每个元素的位置。我怎样才能做到这一点？

我知道它可以用 php 和 ajax 来完成。但不知道应该如何操纵这个位置

我正在使用Meteor-Dragula。假设我将一个包含字符串的容器拖到helloDOM#right元素中。如何访问该字符串？说，将它推入一个字符串数组。

也许我在这样的事情上走在正确的轨道上？

我有以下情况：

使用 angular ajax 获取 JSON 对象数组并使用 ng-repeat 显示为列表。该列表按对象属性“索引”排序，该属性设置为相应列表项的默认输入值。

用户可以更改输入值。按下按钮后，列表将重新绘制，并按更新的输入值排序。现在应该有一个计数器，每当列表项更改位置时++。

到目前为止，我设法计算了所有具有更新值的列表项。如何为更改位置的其他列表项注册位置更改？

例如：#3 将位置更改为#1，然后#1 和#2 也更改位置。

其次，使用 Dragula，列表项现在是可拖动的。列表项被拖动后，如何使用列表？

我也厌倦了Angular Dragula，但没有成功。

这是我在github上的代码。

感谢您的帮助！

我有一个类似于页面构建器模板编辑器的页面。我使用Dragula.JS作为拖放插件，并使用他们的方法 copy 从其他容器中复制元素。这是它的样子：

问题是当我从右侧列拖动并放入左侧框中的元素时，它会完全复制右侧列中的内容。这是我的代码：

和我的 JS：

当我将东西拖到左框容器时，将放置此代码：

那不是我想要的。问题是如何从右容器中复制元素，当放置到左框容器元素将改变我的目标时。我将元素更改为：

请指出我可以实现我的目标的其他拖放插件。

我有一个基本的 Vue.js 对象：

HTML：

我还使用拖放库（dragula）来允许用户重新排列#playlist div。

但是，在用户使用 dragula 重新排列播放列表后，这种变化不会反映在 Vue 中playlist.entries，只会反映在 DOM 中。

我已经挂钩到 Dragula 事件以确定移动元素的起始索引和结束索引。更新 Vue 对象以反映新顺序的正确方法是什么？

小提琴：https ://jsfiddle.net/cxx77kco/5/

我需要以这种方式对容器上的一组 3 个 div 进行排序。

div 类 A

div 类 A

div类B

div 类 A

div 类 A

div类B

每个第三个 div 必须是 B 类，我该怎么做然后将新订单推送到容器？

谢谢，

当我将元素放入新包中时（我使用 angular 1.4.8 和 angular-dragula），我想显示一个确认模式对话框（UI Kit）。如果我单击确定，我想继续该过程，但如果我单击否，我希望元素回到他的原始包中。

到目前为止，这是我的代码：

到目前为止，我的对话框显示完美，如果单击 NO，则触发事件，我只是找不到如何取消放置（我试图在 Dragula 的文档中找到，但无法使其工作。

谢谢你。