jQuery Sortable — issue with items selector

Question

I am using the Sortable plugin from the jQuery UI. Have it working perfectly, but I want to NOT sort and NOT be able to drag other items above the first item. I'm using this item as a title/header for the group and always want it fixed in the first position.

Looking at the jQuery documentation, it looks like I should use the items selector, but this breaks the entire script.

Any ideas? See code and link to JSFiddle below.

HTML:

<div class="cart-group">
    <div class="cart-item no-drag">
        Title Div               
    </div>
</div>

<div class="cart-group"> 
    <div class='cart-item'>
        Cart Item
    </div>
    <div class='cart-item'>
        Cart Item
    </div>
    <div class='cart-item'>
        Cart Item
    </div>
</div>

JS:

$(".cart-group").sortable({
    connectWith: '.cart-group',
    opacity: 0.4,
    tolerance: 'pointer',
    cancel: '.no-drag',
    items:  'div:not(.no-drag),
}).disableSelection();

Link to JSFiddle: http://jsfiddle.net/fZCfh/

Using jQuery 1.7.2 and jQuery UI 1.8.18.

Ah, sorry — I should clarify. I don't want the user to be able to drag items above the Title item (the first item on load). — Ash
oh, okay. why don't you move the header out of the wrapper then? put it outside of the cart-group or use another class for the sortable-wrapper? — GNi33

cjds cjds · Accepted Answer · 2012-12-07T02:38:52

Why are you using cart-group as the same class for the title and items? Create a new class for the title. Then it won't be subject to the same rules as the items.

<div class="cart-group-title">
    Title Div               
</div>
<div class="cart-group"> 
   <div class='cart-item'>
     Cart Item
  </div>
  <div class='cart-item'>
     Cart Item
  </div>
  <div class='cart-item'>
     Cart Item
  </div>

jQuery Sortable — issue with items selector

1 Answers