可排序不能用于不同高度的色谱柱

我与以下图书馆合作：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，以免混乱布局。

bad

有一个现场演示，在这里工作http://jsfiddle.net/jasondavis/4njSE/6/，如果任何人有任何想法。我尝试使用Odd li列表项中的选择器做.sortable>:nth-child(odd) {clear:left}，并且这种方法在外观上很明智，但是它拖动了拖放的功能，当您放置物品时，它们将无法进入正确的位置。

这的jsfiddle显示它与.sortable>:nth-child(odd) {clear:left}工作添加http://jsfiddle.net/jasondavis/4njSE/7/

和想法？我现在亏本了。

我也尝试过包装每个2块内有自己的容器，这有助于但随后拖放不能正常工作，因为库添加到容器div dragable。

这是目标，它应该如何看的图像：

good

来源

2013-03-17 JasonDavis

“活的工作演示”在哪里？ – OpherV 2013-03-17 22:29:03

@OpherV对不起，这是一个不工作像不良形象http://jsfiddle.net/jasondavis/4njSE/6/和这个看起来“正确”使用'.sortable>：nth孩子（奇数） {clear：left}'，但不能很好地工作，只要拖放位置http://jsfiddle.net/jasondavis/4njSE/7/ – JasonDavis 2013-03-17 23:15:49

这里，我们去：

第一 - 在working jsfiddle example 。

基本上，我已经为插件添加了两个事件回调：onStartDrag和onEndDrag。这些函数依次调用addFloats函数，这是一个简单的函数，用于为奇数元素添加浮点数，而这些元素不是而是sortable-dragging元素（这是纯CSS无法实现的）。调用可排序插件时，我们也必须调用该函数，但这就是它。

享受:)

来源

2013-03-18 18:54:56 OpherV

嘿，非常感谢你，这更接近我想要的。正如你可能已经注意到它仍然有一个奇怪的行为，我认为如果占位符类的高度与被移动的盒子的高度相同，它会更好。在JS内部，我看到它有一个部分，我认为它应该这样做，但显然这在默认代码中不起作用。你会不会知道如何解决这个问题？感谢你的贡献，谢谢！ – JasonDavis 2013-03-18 19:25:44

完成。看看'placeholder.css（“height”，$（this））。height（）+“px”）;' – OpherV 2013-03-18 20:09:32

嘿，你真是太棒了，你很善良，能帮助我，我更喜欢PHP编码器。如果你从这个位置开始http://codedevelopr.com/screenshots/2013-03-18_16-34-40.png ，然后将项目3移到这样的右列 http://codedevelopr.com/screenshots /2013-03-18_16-35-52.png 而不是显示在右列中的占位符显示在左列..只是一个奇怪的问题。我不确定这个代码的工作方式甚至可以修复。我不指望你能解决这一切，但也许你可以告诉我这是否可能。非常感谢您的帮助，将您的答案标记为最好的 – JasonDavis 2013-03-18 20:42:12

添加这个CSS：

.sortable>:nth-child(odd) {clear:left}

来源

2013-03-17 21:41:31

你好，我已经尝试过，但它拖动拖放功能顺序 – JasonDavis 2013-03-17 21:44:14

可排序不能用于不同高度的色谱柱

回答

相关问题