如何暂时禁用使用https://github.com/RubaXa/Sortable中的 javascript 进行排序？

看到这个 jsfiddle 例子。这就是它的设置方式：

我正在使用Rubaxa 的这个 Sortable 插件，在它的帮助下，我想用“块”类对我的嵌套表进行排序。

HTML

JS

但我无法让它与表格一起使用。这个插件是否只允许对直接子项进行排序？是不是因为表格的结构它不起作用？还是出于其他原因？

jsFiddle 链接

我的问题是在可放置区域上拖放项目时如何创建动态网格。

我想使用 jquery UI，因为我只需要它来实现这个功能，而这只是一件事的大量代码。

我想做这样的事情http://mcpants.github.io/jquery.shapeshift/但不那么复杂。

我将附上我的网格的屏幕截图。可拖动的元素是“ddd”。

它是一个angularjs APP，我正在使用这个库进行拖放：https ://github.com/fatlinesofcode/ngDraggable

试图使用这个库，但我可以让它工作： https ://github.com/RubaXa/Sortable

有什么建议么？

好的，我正在尝试使用RubaXa 的 Sortable 插件。（这是一个很好的示例页面）

该插件工作正常。问题是我怎样才能获得元素被删除的索引？（例如从列表的索引 2 到索引 0）

演示：http: //jsfiddle.net/j7fesLkp/1/

好的，所以我又来了，玩@RubaXa 的Sortable插件（希望他在附近的某个地方，因为这个插件相当复杂......）

一些发现（我花了一些时间才完全理解机制，但我认为我是对的）

情况1

如果我们设置一个div具有相同类型的内容，它会立即排序。例如：

HTML

JavaScript

演示：http: //jsfiddle.net/b02wfe4o/

案例2

如果我们设置一个div不同类型的内容（例如h2s 和h3s，我们还必须指定draggable类。例如：

HTML

JavaScript

演示：http: //jsfiddle.net/qemz00eq/1/

案例3

如果我们div并排设置 2 个（或更多），它的工作方式几乎相同。例如：

HTML

JavaScript

演示：http: //jsfiddle.net/qeyxxj4y/

问题

现在，如果可排序 A 是可排序 B 的子级怎么办？

HTML

JavaScript

演示：http: //jsfiddle.net/j7fesLkp/8/

好吧，现在这不能按预期工作：

• myContainer2物品可以在其容器内完美移动/分类。这很好。
• myContainer1虽然物品也可以移入myContainer2，但我的意思是将元素1.1放入myContainer2作品中 - 当两个容器并排时不会发生这种情况。

那么，我们如何才能禁用这种行为呢？我的意思是：每个容器的项目只能在该容器内移动，而不能在其子容器内移动。

怎么可能呢？

为什么我的可排序角度 ng-repeat 菜单会删除排序菜单项之后的所有内容？ https://github.com/RubaXa/Sortable/tree/dev 我正在使用带有 Angular 的 RubaXa 的 Sortable 库来为自定义 CMS 制作可排序的菜单系统。当菜单被排序时，我有一个遍历所有菜单项的代码循环，记录它们的位置并更新 $scope.menus。

$scope.menus 有两个不同的属性 .main 和 .footer，每个属性都包含一个菜单列表项数组。当我制作 $scope.menus = menus 时，$scope.menus 是正确的，但是视图突然摆脱了页脚菜单和编辑按钮，它们不在 ng-repeat 中。这是菜单的玉石。

使用 jQuery 添加编辑按钮

我尝试了一个使用 Sortable.js 的非常简单的示例：两个列表：一个当前为空，并将存储来自另一个列表（静态）的项目副本。

我尝试为每个列表定义 pull 和 put 值，定义相同的组名，但它不起作用。事实上，填充列表中的静态元素根本不可拖动。

我在 JSbin 写了这个例子。由于我是 JS 新手，我接受各种建设性意见。

顺便说一句：任何绘制引导列表边框的方式，即使是空的？

我正在使用 Sortable 库（https://github.com/RubaXa/Sortable）在两个列表（模型）之间创建拖放关系。为清楚起见，我们称其为 SourceModel 和 DestinationModel。

项目从 SourceModel 拉（并克隆）到 DestinationModel。放入 DestinationModel 的项目使用 ng-repeat（DestinationModel 跟踪 $index 中的 listItem）呈现，该项目由索引跟踪。

我遇到的问题是，当您克隆项目时，任何相同类型的生成克隆都是“数据绑定的”，因此由于我使用 contenteditable 来操作对象，所有相同类型的对象被改变了，包括原来的。（因此该类型的后续拖动也发生了变化）

你可以在这里看到问题：

在本次会议期间，两个顶部组件被拖入，当您更改一个时，您同时更改了两个。但是，页面加载时已经存在的对象没有绑定，因此不会随着其他两个的变化而变化。

保存配置并刷新后，由于项目是按索引跟踪的，所以一切都独立且正常。

我尝试在 Sortable 中使用 onAdd() 回调对添加时的项目进行深层复制，但这不起作用。

https://github.com/RubaXa/Sortable#options

我还尝试通过以下函数强制数组在删除后“清理”哈希键的模型：

但是，我也没有太多运气 - 对象仍然是绑定的。

我怎样才能确保我打破了对象之间存在的数据绑定。我仍然需要在标记和模型之间独立绑定它，但是，它们不应该绑定在一起。

注意：我没有使用 jQuery。最多，我可以访问 jqlite 作为 AngularJS 框架的一部分。

我有两组列表，列表 A 和列表 B。我想限制将列表 A 中的重复项目放入列表 B。列表 A 配置为克隆其项目。我正在使用可排序的 AngularJS（https://github.com/RubaXa/Sortable）。

这是我的两个配置：

我试图让 rubaxa 可排序（http://rubaxa.github.io/Sortable/）与聚合物一起使用。

我从 rubaxa-sortable 开始，它应该可以做到这一点，并且适用于标准项目（https://github.com/divshot/sortable-list/blob/master/sortable-list.html）

但是，一旦我使用自定义元素，效果就会变得奇怪。

一个旧线程（http://polymer-dev.narkive.com/YWiwS9A9/custom-element-drag-and-drop）给了我检查不同显示类型的提示。

行为如下：

• display: block: 不能拖动
• display: inline: 可以拖动，但是幽灵离鼠标很远
• display: inline-block: 可以拖动，但是幽灵离鼠标很远

关于如何解决这个问题的任何想法？另一篇文章似乎暗示这是一个错误，但那是一年前的事了..？

为了说明我已将可排序列表代码复制到 jsbin 并对其进行了扩展：http://jsbin.com/zemugeyulo/1/edit?html, output

有什么想法可以解决吗？我刚刚开始讨论这些主题，所以我可能错过了一些明显的东西..？

解决方案

我的错误是将显示标签放在错误的位置。我做了：

正确的解决方案在哪里

@rubaxa：感谢您的支持和伟大的图书馆！