CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
user3538235
user3538235

Reputation: 2009

Non sortable item between sortable item in Jquery UI

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

Upvotes: 2

Views: 208

Answers (1)

Draco18s no longer trusts SE
Draco18s no longer trusts SE

Reputation: 15941

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/

Upvotes: 1

Related Questions