拖放并使该元素响应

Question

我正在尝试实现一个jquery拖放。

1. 我想知道哪个是最可自定义的插件？
2. 在执行拖放之后考虑，我想让设计响应。 例如。画布面积为100 X 100像素。我放置一个25 x 25px的正方形。因此它的顶部和左侧将是25像素。 现在考虑这种设计需要在全屏模式下放大以适应整个屏幕。我们将使用宽度：100％用于画布，但添加的div的顶部和左侧是25px。

我们如何确保它适合所有屏幕尺寸？ 在拖放时存储这些参数时我需要采取哪些步骤？ （存储顶部，左边是百分比还是px）还是有更好的媒体查询方式等？

感谢。

Answer 1

您可以使用以下两个选项：

1. rubaxa-sortable是一个快速，无依赖性的小型可重新排序列表小部件，具有触摸支持，可与HTML5本机拖放API配合使用。您可以将它与Bootstrap，Foundation或任何所需的CSS库一起使用，并将其实例化只需要一行。

更多细节：How can I implement a touch-sensitive, responsive, sortable list supporting drag & drop for Bootstrap?

1. jQuery Resposive drag and drop plugin

   Demo

2. http://jquer.in/tag/drag-drop/ - 您可以在此页面查看插件，可以为您提供帮助。

Answer 2

嘿，你没有必要使用任何插件来做到这一点。只需使用jquery从jquery站点拖放并将其集成到您的应用程序中，但在此之前只需阅读文档，因为它不会超过15分钟。

响应性的第二个解决方案是，当你要安排你丢弃的项目时，首先制作一个虚拟画布，里面有虚拟数据，然后为它创建一个响应式css，当你在拖放后拖放任何东西时，你可以应用它要删除项目的类。因此，您的响应能力将与应用程序相同。但我建议不要使用任何插件