请看这个演示点击这里
第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选项,可以链接两个容器,以便它们的内容可以在它们之间自由移动。
容器需要最小的尺寸,所以他们不会消失,如果空(这也是我添加灰色背景的原因)。