Please see this demo Click Here
Item 3 does not get sorted.How To make every element sort perfectly?
Note : Item 3 is float:right thats the need in project.
Acually in my project I have used DOM positions (eg:left:20px , right:10px) rather than float left or right.
If anyone can make this
Demo workable than it would be huge help.
What i want is all the elements should sort (specially item 3 which is not sorting).
What I tried is this .Which is not perfect.
Explanation :when user drags a element to left side of parent div and drops than the element sticks to left of div .. if dragged to right it sticks to right. thats the reason i am using DOM positions. Now I have to make it sortable too.
答案 0 :(得分：1)
By having float: right on Item 3, you're explicitely telling the browser to position to the right hand side of everything else in the same block that is not styled with float:right.
If you have a look at the DOM in your browser's dev tools after having tried to move Item 3, you'll see that it has actually been repositioned.
Edit:
I guess this does what you need? https://jsfiddle.net/or6m2v4z/6/
Instead of having the float style on the items themselves, they've been wrapped inside two containers floating left and right respectively.
Using the sortable connectWith option, both containers can be linked so that their contents can be moved freely among them.
The containers need minimum dimensions so they don't disappear if empty (that's also the reason I added the gray background).
答案 1 :(得分：1)
The sort works, it's the css that is causing you problems. Try this way:
https://jsfiddle.net/or6m2v4z/4/
What I changed:
#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}
And I also removed the inline styles :)
EDIT
I just read the explanation you provided, if you want to drop elements left or right, maybe you should use a left and a right container and try with the droppable function instead of sortable.
drag drop and change parent of a div in dom
EDIT 2
I did a little workaround for you. Try this: