jquery - 使用 jquery 可拖放和可排序创建新元素

标签 jquery jquery-ui jquery-ui-sortable

我想做的是创建一个卡片分类脚本。基本上,您有一个“卡片”列表,然后您应该将其分类到任意数量的“堆栈”(列表)中。我正在使用 jQuery-UI 可排序插件,并且能够连接列表以在它们之间拖动。我面临的问题是,我无法找到一种方法来检查卡片是否悬停在空白区域或现有列表上,以及如果是前者,当我放下它时,会创建一个新列表。

我尝试使用可拖动/可放置,以便卡片最初不限于可排序,但我仍然无法让它识别卡片的位置。我还认为可拖动/可放置不会是我所需要的,因为这样我就无法将卡从可排序移回原始列表(可拖动)。

最终,我将使用 jQuery 的 ajax 功能来保存排序结果,但在我可以让它创建新列表之前我无法这样做。

有人有做过这样的事情的经验吗?任何帮助都会很棒!

最佳答案

抱歉回复晚了,但我正在处理这个问题,没有注意到其他答案。

我的变体所做的事情与 Goran 的非常相似。 http://jsfiddle.net/fordlover49/rxVPq/

请注意,您需要根据您想要的内容添加标题和其他所有内容,但它实现了基本目标,同时保留原始项目,并且只有一组用于可排序列表的选项..

虽然 Goran 的解决方案似乎有效,但我要提醒您,他用来移动对象的方法是危险且不正确的。如果您在要移动到新列表的项目上有任何事件绑定(bind)器,它们将会丢失,因为他已从 DOM 中删除了您具有事件绑定(bind)的旧项目。

关于jquery - 使用 jquery 可拖放和可排序创建新元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9012029/

相关文章:

c# - ASP.NET 系统.Web.优化 : Bundling jQueryUI CSS

javascript - 非常风格的 CSS 巨型菜单

css - 为什么我不能让 jquery ui sortable 有一个 "smooth"水平自动滚动?

AngularJS/UI ui-sortable 没有隔离范围?

jquery - 生成的 JsonResult 中的属性名称大小写不一致

javascript - 如何避免 jQuery 的按键延迟?

php - 将 PHP 和 JSON 编码转换为 Javascript 日期

javascript - 使用 Jquery AJAX 和 ASPX 表单的 POST 参数

json - 带有自动完成问题的 jQueryUI Ajax 调用 - JSON 正确吗?从旧的自动完成迁移

jquery - 在开始之前取消拖动