没有相同维度的JQuery可排序网格function
我希望创建一个可排序（通过拖放）网格，类似于JQuery的可排序网格（ http://jqueryui.com/demos/sortable/#display-grid ）。 但是，Sortable要求您仅使用具有相同尺寸的div。 出于我的目的，允许每个块具有不同的宽度和高度。
我正在寻找的function是捕捉网格function，同时“推”其他元素。 除了防止它们重叠并将其他元素推开之外，Draggable可以完成所有操作。
哦，它也不一定是Jquery。 如果它更容易，我愿意使用其他方法。
Jquery sortable不要求项目具有相同的尺寸，您可以在我的原型中看到： http ： //brettlyman.net/dashboard/index3.html
大多数人使用
- 作为可排序容器，
- 作为可排序项，它们可以包含您想要的任何内容。 只要确保你输入“list-style-type：none; margin：0; padding：0;” 在
- 的样式中，它看起来/表现得像一个容器。
不幸的是，在排序时你不能做一个自由forms的网格 – 这些项目必须紧邻彼此。 在我的原型中，我将所有东西都悬浮起来，所以它们向右填充，然后下降到下一行。 我在容器的大小调整上设置了网格选项，但是，我可以强制执行网格类型布局。
以为我会发布我的解决方案以防其他人遇到同样类型的问题。
简短的回答：
使用“停止”事件根据新位置重新计算所有网格元素。
普通的留言：
具有可变元素尺寸的可排序网格 – 它是一个视觉混乱，因为不同大小的元素移动多次，上下跳跃，而你拖动其中一个; 每次运动后布局完全不同。
研究类似的function我开发了jQuery插件“Swappable” http://www.eslinstructor.net/demo/swappable/swappable_home.html
最近我回答了关于这个插件的同样问题：
在Draged＆Dropped时交换元素（也使用className）
请看一下讨论，也许对你有帮助。
最好的祝福，
-Vadim
我遇到了这个问题，试图为自己解决问题。
我正在尝试解决方法的第一次迭代： 使用父容器作为droppable 。 会告诉你它是否有效：
对于以下HTML：
1 2 3 ... 使用以下JavaScript：
$('#sortable') .sortable({ handle: '.handle', tolerance: 'pointer' }) .droppable({ drop: function(e, ui) { var previousElement = ui.draggable.parent().children().filter(function() { var $this = $(this); var pos = $this.position(); return (this != ui.draggable[0]) && (pos.left <= ui.position.left) && (pos.top <= ui.position.top); }).last(); if( previousElement.length ) { previousElement.after(ui.draggable[0]); ui.draggable.parent().data().sortable._noFinalSort = true; } } });