ui-sortable不工作(对于预定义的DOM位置)



请看这个演示点击这里

第3项未排序。如何使每个元素排序完美?

注:项目3是float:right,这是项目需要的。实际上,在我的项目中,我使用了DOM位置(例如:左:20px,右:10px),而不是浮动左或右。如果有人能做到这一点
演示比实际可行会有很大的帮助。

我想要的是所有元素都应该排序(特别是第3项,它不排序)。

我尝试的是这个,这是不完美的。

说明:当用户将一个元素拖到父div的左侧并将其拖放到div的左侧时。如果向右拖动,它就会一直向右。这就是我使用DOM位置的原因。现在我还需要让它可排序

排序起作用了,是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}

我还删除了内联样式:)

编辑

我刚刚读了你提供的解释,如果你想在左边或右边删除元素,也许你应该使用一个左边和一个右边的容器,并尝试使用dropable函数而不是sortable。

拖放并更改dom中div的父元素

编辑2

我为你做了一点变通。试试这个:

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

通过在项目3上设置float: right,您明确地告诉浏览器在同一块中不使用float:right样式的其他所有内容的右侧定位。

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

编辑:

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

物品本身没有float样式,它们被分别包裹在左右浮动的两个容器中。使用可排序的connectWith选项,可以链接两个容器,以便它们的内容可以在它们之间自由移动。

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

最新更新