Sort items into fixed container with jQuery ui sortable

Question

I have a problem with my sortable list. I have two container which both have sortable list inside. One of the two container have a fixed position. While I can move an item from the fixed container to the other, I cannot move an item from the not-fixed container to the fixed one.

$('ul').sortable({
  connectWith: $('ul'),
  items: '> li'
});

.fixed {
  position:fixed;
  left:100px;
  top:0;
}

<div class="fixed">
  <ul>
    <li>f1</li>
    <li>f2</li>
    <li>f3</li>
  </ul>
</div>
<div class="not-fixed">
  <ul>
    <li>nf1</li>
    <li>nf2</li>
    <li>nf3</li>
  </ul>
</div>

You can see the problem there : http://jsfiddle.net/mQP8p/

The fixed container must be with a fixed postion (the container must follow the page vertically and horizontally)

Does someone have seen this before?

Thanks !

Answer 1

It looks like your not-fixed class element was not a set width so it was appearing over the fixed class element. This is why it was still sorting your first list even when you dragged over the fixed list. Try something as simple as setting the width on the not-fixed class.

.not-fixed {
   width: 50px;
}

Fiddle

Note: Changing the width of your parent div will effect the area that you can drag your element. Play around with it and see what width works best for your purposes.