相互粘在一起的可拖动块

Question

这是 codepen 上的 sample。

我在后端使用 rails 应用程序和 mongoDB，在前端使用 jquery 和 Draggabilly 库。

每次触发 dragEnd 或 focusout 事件时，应用程序会尝试通过 ajax 请求将卡数据保存到数据库。如果出现错误，它会在警报中显示 return 422 代码状态和​​错误消息。

在该示例中，我模拟了来自应用程序的错误消息，以便在 focusout 从新卡中的输入触发时始终显示警报。

问题：

1. 添加一张新卡
2. 写一些测试名称
3. 然后点击其他卡片触发focusout
4. 在警报中单击 'OK'
5. 点击回到之前添加的卡片

如您所见，两张卡片粘在一起。 有什么建议可以避免 glue 影响吗？

Answer 1

解决方案是让所有可拖动元素在任何输入聚焦时都禁止拖动。并在 ajax 请求成功时启用它们。