UI的排序不工作（预定义的DOM位置）

请参阅本演示Click Here UI的排序不工作（预定义的DOM位置）

项目3没有得到sorted.How让每一个元素排序完美？

注：第3项是float:right这就是项目的需要。通常在我的项目中，我使用了DOM位置（例如：left：20px，right：10px），而不是向左或向右浮动。如果任何人都可以使这个
Demo可行比它将是巨大的帮助。

我想要的是所有的元素应该排序（特别是不排序的项目3）。

我试过的是this。这不完美。

说明：当用户拖拽一个元素到父div的左侧，并且落下比元素落在div的左侧时。如果向右拖动它会向右移动。这就是我使用DOM位置的原因。现在我必须把它分类。

来源

2015-10-06 Yo Yo

我试过的是工作。但首先根据代码中的DOM位置重新排列，而不是在第一次尝试后完全排序。我想在第一次尝试本身时完全排序 –

您是否希望最后一项始终为'float：right'？ – Skatch

@Skatch我在问题中添加了一个解释。你会明白我的需要 –

通过在项目3上设置float: right，您明确地告诉浏览器将其放置在与float:right不同的块中的其他所有块的右侧。

如果您在尝试移动Item 3后查看浏览器开发工具中的DOM，您会发现它实际上已被重新定位。

编辑：

我想这就是你需要的吗？ https://jsfiddle.net/or6m2v4z/6/

而不是在项目本身上有float样式，它们已被包装在分别左右浮动的两个容器内。使用可排序的connectWith选项，两个容器可以链接，以便他们的内容可以自由移动。

容器需要最小尺寸，所以它们不会消失如果是空的（这也是我添加灰色背景的原因）。

来源

2015-10-06 08:32:50 Goujon

我知道先生。我知道。但那是客户的需要。如何让我的项目经理接受这个事实：D是否有任何其他替代方法使物品粘在div的左侧和右侧（掉落时）。而不是排序：| –

我在我的问题中添加了一个解释，您现在可以确切知道确切的需求 –

我的所有元素都在一个父div中，但 –

排序工作，这是导致你的问题的CSS。试试这个方法：

https://jsfiddle.net/or6m2v4z/4/

我改变什么：

#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; float:left} 
#sortable li:last-child {float:right}

而且我也去掉了内嵌样式:)

编辑

我刚刚看了你的解释提供，如果你想要向左或向右放置元素，也许你应该使用左和右连续ainer并尝试使用droppable函数而不是sortable。

drag drop and change parent of a div in dom

EDIT 2

我做了一些解决办法给你。试试这个：

https://jsfiddle.net/or6m2v4z/5/

来源

2015-10-06 08:38:46 Skatch

事实上，我也想要那个CSS。需要在第1步。排序是第2步...和项目可以随机浮动右或左。 –

它检查物品是否大于或小于容器的半宽。不总是正确的，但非常有用..你能告诉我是否可以像左边的位置：20px或右：0px –

那么，ui.position参数只给你左和顶，但你可以计算正确的参数'container_width - （left + width）'。我不知道你是否需要一个容器宽度，或者可能是身体宽度，但你明白了。 :) – Skatch

UI的排序不工作（预定义的DOM位置）

回答

相关问题