jQuery sortable list - disable first element

Question

I have an sortable list but I would like to disable the first item, so that the input field cannot be moved.

Here is the list:

<ul id="sortable" class="connectedSortable">
    <input name="name1" class="inputfield" type="text" maxlength="30">
    <li>first sort item</li>
    <li>second sort item</li>
</ul>

And the js:

$("#sortable:not(:first-child)").sortable({
            connectWith : ".connectedSortable"
        });

I tried to solve this with the :not(:first-child) but it is not working... Does someone know how to do this?

Thanks!

You also can't have items inside of a <ul> that aren't inside of <li> tags — Mark Pieszak - Trilon.io
– Mark Pieszak - Trilon.io, Commented Nov 7, 2012 at 18:20

j08691 · Accepted Answer · 2012-11-07 18:24:51Z

4

If you fix your HTML so that your input is properly wrapped in a list item, then you can try using the sortables's items option:

$("#sortable").sortable({
    items: "> li:gt(0)", 
    connectWith: ".connectedSortable"
});

jsFiddle example

answered Nov 7, 2012 at 18:24

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kane Cohen · Accepted Answer · 2012-11-07 18:28:30Z

4

How about this?

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

Demo

answered Nov 7, 2012 at 18:28

Kane Cohen

1,80012 silver badges17 bronze badges

Comments

Mark Pieszak - Trilon.io · Accepted Answer · 2012-11-07 18:28:42Z

1

Your HTML isn't valid, since you cannot have HTML inside a <ul> that isn't also inside of the <li>'s.

var _input = $("#sortable :first-child");

$('#sortable').before(_input); // move it outside of the UL
$('#sortable').sortable();

http://jsfiddle.net/nF7yW/

answered Nov 7, 2012 at 18:28

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

Collectives™ on Stack Overflow

jQuery sortable list - disable first element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related