问题标签 [dragula]

我将 Dragula JS 用于拖放功能，我还希望可以选择通过鼠标单击来回移动列表中的元素，而不会丢失拖放功能。我该如何实现这一点？

所以我点击元素 1，它移动到列表中。我从该列表中单击它并返回。这就是想法。

如果有帮助，我准备了一个基本的拖放操作。 http://jsfiddle.net/vf6dnwxj/10/

我在上面小提琴中的结构：

JS：

我试图了解如何复制此代码：

与 Dragula JS https://github.com/bevacqua/dragula（在 vanilla Java Script 中）一起使用。我不明白如何使用 dragulaJS 调用 .sortable 然后序列化。

有什么建议可以让我摆脱 .sortable 并让序列化与钱包 Java Script 一起工作吗？

（有关第二部分 Dragula JS 的参考，请参见此处：dragula JS 通过单击事件从一个列表移动到另一个列表）

我的 HTML：

ng2-dragula 看起来很酷，但我很难为我的 angular 2 项目设置它。我system.js用作模块预加载器，它的配置是：

我的tsconfig.json：

我将它加载到我的组件中，如下所示：

我做错了什么，所以在浏览器中出现以下错误：

Codepen在这里： http ://codepen.io/jasonsawtelle/pen/jqbeXd

这是一个基本设置，并且 Dragula 正在工作，但是当我拖动一个 div 时，包含的、调整大小的 css 图像在拖动事件期间弹出到全尺寸。

我正在开发一个应用程序的前端来跟踪比赛。在一个页面中，用户需要通过将玩家从左侧列表中拖动到右侧最终结果表中来更新锦标赛结果，我将发送到 PHP 后端进行处理（我不是在开发后端，只需要通过 POST 发送正确的数据）。我的要求是：

1. 有一个球员名单
2. 有一个结果表，每行都有固定的位置（第一行，第二行）。
3. 每个位置将有 4 个相关输入，全部命名为position-1-NAME，位于同一行但不同的列中
4. 用户应该能够将玩家拖到每个位置
5. 一名球员只能在一个位置，每个位置只能有一名球员
6. 当玩家被放置在桌子上时，他应该从列表中删除

我尝试了几种方法，但最接近的一种方法是使用Dragula JS插件。

然后，我创建了带有 的玩家列表，ul使其id成为 Dragula 中的容器：

然后，我有一个table内部form标签，并且字段的名称都是根据位置命名的，例如position-1-name-of-the-input：

然后，在 JavaScript 中，我做了一个 hack，text()从li被拖动的对象中抓取 并将其放在 的value属性中input，table这样我就可以将第一个位置的玩家名称发送到后端。编码：

到目前为止，这正在处理一些错误：

1. 我可以在同一个中放置两个播放器td，它们将在 UI 中显示两者都被拖动li，但表单将只有最后放置的播放器的值。

2. 如果我将玩家一个接一个地拖到所有位置，所有输入都将具有他的名字的值，直到我将另一个玩家拖到该位置为止。

所以，我想完成几件事：

1. 每个里面只允许一名玩家td class="target"。我试图td通过删除.target类来禁用它，但是在被丢弃后我无法再次移动播放器。

2. 当我将播放器拖出时，删除输入的值。

我知道这有点小技巧，但我对 JS/jQuery 没有太多经验，这是迄今为止唯一可以远程工作的解决方案。

我的问题：

1. 如何防止td使用 Dragula 或 JS / jQuery 代码将多个玩家表单拖到同一个？

2. [已解决-见编辑]当我将播放器拖出时value如何删除？inputtd

3. 你知道一个更好的方法来实现这些要求来推荐吗？

编辑

我通过添加以下代码设法解决了问题 2：

我试图将https://github.com/valor-software/ng2-dragula注入到使用 JSPM 包管理器统治的 Angular2 项目中。但是当我导入它时，主 boot.js 文件无法编译......我之前找到的唯一解决方案是将项目移动到 webpack 管理。还有其他解决方案吗？

我正在尝试制作与典型的窗口调整大小功能相同的鼠标大小调整功能，您可以在其中抓住元素的 4 个边缘中的每一个并调整大小 - 或同时调整宽度和长度大小的角。

因为我已经在使用 Dragula 进行拖放功能（移动项目），所以我想避免使用https://jqueryui.com/resizable/来调整大小，我觉得 Dragula 应该能够处理这个作为出色地。但是除了这个https://github.com/bevacqua/dragula/issues/195之外，我找不到任何关于此的信息，其中的响应根本不是很有用。

这可能是一个愚蠢的问题，但我至少不知道如何用 Dragula 实现这个，所以我希望你们中的一个人能够启发我。:-)

我有一个 Angular2 组件使用 ng2-dragula 像这样拖放：

我的问题：如果我创建多个“my-comp”组件，“card-bag”内的项目无法在这些组件中拖放，尽管它​​们具有相同的包名称。这些项目只能在其拥有的组件内拖放。

我们是否有任何用于跨组件拖放的配置，或者这是 ng2-dragula 限制？

谢谢。

我有一个简单的项目列表，我想使用拖放重新排序。我正在使用 Dragula 来做到这一点。

当我使用 Chrome 时一切都很好，但是当我在 IE11 中测试它时，当我在文本字段上拖动时，我的光标闪烁。有人可以解释我为什么以及如何避免这种情况吗？

这是片段：

我在我的应用程序中使用服务器渲染，并在使用名为react-dragula的 Dragula 库的反应扩展时遇到了一个问题

这里的问题在于

由于某种原因，这种使用document会在服务器端渲染期间导致错误，因为文档不存在，因此我需要一种方法来仅包含它一次document可用，以便我可以开始使用它。