没有相同尺寸的JQuery可排序网格功能 [英] JQuery Sortable Grid Functionality without Identical Dimensions

问题描述

我希望创建一个可排序的（通过拖放）网格，类似于JQuery的可排序网格（ http ：//jqueryui.com/demos/sortable/#display-grid ）。但是，可排序要求您仅使用具有相同维度的div。为了我的目的，每个块被允许是不同的宽度和高度。

I am looking to create a sortable (via drag and drop) grid, similar to what JQuery's Sortable grid does ( http://jqueryui.com/demos/sortable/#display-grid ). However, Sortable requires that you use only divs with identical dimensions. For my purposes, each block is allowed to be different widths and heights.

我正在寻找的功能是快照到网格功能，而推另一个元素出路。除了阻止他们重叠并将其他元素推开之外，可拖动可以做任何事情。

The functionality I am looking for is the snap-to-grid capabilities while "shoving" the other elements out of the way. Draggable does everything except for preventing them from overlapping and shoving the other elements out of the way.

哦，它也不一定要是Jquery。我可以使用其他方法，如果它更容易。

Oh, it doesn't have to be Jquery either. I'm open to using other methods if it is easier.

推荐答案

Jquery可排序不要求项目是相同的维度，您可以在我的原型中看到： http://brettlyman.net/dashboard/index3.html

Jquery sortable does not require the items to be the same dimensions, as you can see in my prototype here: http://brettlyman.net/dashboard/index3.html

大多数人使用< ul>作为可排序容器，< li>作为可排序项目，它们可以包含任何您想要的内容。只要确保你把list-style-type：none; margin：0; padding：0;以< ul>的风格所以它看起来像一个容器。

Most people use <ul> as the sortable container and <li>'s as the sortable items, and they can contain any content you want. Just make sure you put "list-style-type: none; margin: 0; padding: 0;" in the style of the <ul> so it looks/behaves like a container.

不幸的是，您无法执行自由格式的网格 - 项目必须彼此靠近。在我的原型中，我把所有剩下的东西都浮起来，所以他们把它们填满了，然后放到下一行。然而，我将grid选项设置在容器的大小上，所以我可以执行一个网格类型的布局。

Unfortunately with sortable you cannot do a free-form grid -- the items must be next to each other in proximity. In my prototype I float everything left, so they fill to the right and then drop to the next line. I have the grid option set on the resize of my containers, however, so I can enforce a grid-type layout.

想到我会发布我的解决方案，以防其他人遇到相同类型的问题。

Thought I'd post my solution in case anyone else is having the same type of problem.

这篇关于没有相同尺寸的JQuery可排序网格功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！