2

enter image description here

There is an icon between each sortable item , but not the last one, and of course the icon is non - sortable,

but from jquery UI example can't achieve the expect result

<ul id="sortable">
<li>itemA<p>-----</p></li>
<li>itemB<p>-----</p></li>
<li>itemC<p>-----</p></li>
<li>itemD</li>
</ul>


$("#sortable").sortable({
    items: "> li"
});

https://jqueryui.com/resources/demos/sortable/items.html

Here is the jsfiddle, in this case the item D will always have no icon follow it but it doesn't necessarily the last one

https://jsfiddle.net/Lzp821qs/

Thanks a lot for helping.

Update:

Sorry for confusing, the case is like this:

first I have a list like

A
icon
B
icon
C
icon
D

Then I would like to make it sortable, but maintain the icon, eg. the A can switch with B , then it would be

B
icon
A
icon
C
icon
D
user3538235
  • 1,991
  • 6
  • 27
  • 55
  • 1
    Are those dashes in the fiddle supposed to represent the icon? I am still a little unclear what the question is. Are you asking how to maintain the icons with sorting? Are you asking how to add a new icon when the last one is sorted away from being last? If the dashes represent the icon they will always be apart of sorting since they are inside the li. – AtheistP3ace Dec 14 '15 at 15:47
  • 1
    Change your markup and use this advice http://stackoverflow.com/questions/15370754/jquery-ui-sortable-disable-for-one-li-item – murrometz Dec 14 '15 at 15:48
  • updated the question, please feel free to ask any more about the detail. Thanks – user3538235 Dec 14 '15 at 15:55
  • 1
    did you try my advice? – murrometz Dec 14 '15 at 16:02
  • thanks. the problem when using cancel / items are , if I switch A with B, the icon will move to the bottom, it become B->A->icon , instead of B->icon->A – user3538235 Dec 14 '15 at 16:04

1 Answers1

1

Update, due to question confusion.

This jquery statement will do what you're looking for. When the sorted list changes, it removes the spacer item (represented by a span with four hyphens), adds the spaces back, then locates the last spacer and removes it (this is due to it being impossible to accurately select for when building, due to the uncertain nature of the li node order).

$("#sortable").sortable({
    items: "> li"
    ,
    change: function(event, ui) {
        $(".breaker").remove();
        $("#sortable>li:not(.ui-sortable-helper)").after("<span class='breaker'>----</span>");
        $("#sortable>span").last().remove();
    }
});

https://jsfiddle.net/s8uajffp/

Draco18s no longer trusts SE
  • 15,628
  • 3
  • 36
  • 56