3

我正在使用这个库：HTML5 Sortable Drag and Drop。

我将它用于块，2 列宽。它的标记：

<ul class="sortable grid">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li style="height: 200px;">Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li style="height: 200px;">Item 7</li>
    <li>Item 8</li>
</ul>

我有一个问题。当某些块具有不同的高度时，我需要以某种方式清除float第二个块之后的内容，以免弄乱布局。

坏的

如果有人有任何想法，这里有一个现场工作演示http://jsfiddle.net/jasondavis/4njSE/6/ 。我曾尝试.sortable>:nth-child(odd) {clear:left}在奇数li列表项上使用选择器，这在外观上很有效，但它会扰乱拖放的功能，当你放下项目时，当我这样做时，它们不会进入正确的位置。

这个 JSFiddle 显示它与.sortable>:nth-child(odd) {clear:left}添加 的http://jsfiddle.net/jasondavis/4njSE/7/一起使用

和想法？我现在不知所措。

dragable我还尝试将每组 2 个块包装在自己的容器中，这会有所帮助，但是由于库将 a 添加到容器 div 中，因此拖放无法正常工作。

这是目标的图像，它的外观：

好的

4

2 回答 2

2

开始了：

首先 -工作 jsfiddle 示例。

基本上，我在插件中添加了两个事件回调：onStartDrag和onEndDrag. 这些依次调用该addFloats函数，这是一个简单的函数，负责将浮点数添加到不是元素的奇数元素（这sortable-dragging不能用纯 CSS 实现）。我们还必须在调用可排序插件时调用该函数，但仅此而已。

享受 ：）

于 2013-03-18T18:54:56.927 回答
1

添加这个CSS：

.sortable>:nth-child(odd) {clear:left}
于 2013-03-17T21:41:31.697 回答