Question

I have the following empty list:

<ul class="sortable_list">
  <p><a>Add new item</a></p>
</ul>
<ul class="sortable_list">
  <li class="sortable_item">
    AAA
  </li>
  <li class="sortable_item">
    BBB
  </li>
  <p><a>Add new item</a></p>
</ul>

And the following script:

$(".sortable_list").sortable({
  items: "li.sortable_item",
  connectWith: ".sortable_list",
  axis: "y",
  cursor: "move",
  placeholder: "ui-state-highlight",
  revert: "140",
    update: function() {
        alert('hehe');
    }
}).disableSelection();

The 1st ul.sortable_list is empty. When I drag the li.sortable_item from the 2nd ul.sortable_list to the 1st ul.sortable_list, the li item can be put below the p, which is not something I want. I want it to always be above p.

But, if I drag-drop the 2nd ul.sortable_list items within the same list, it can’t go below the p which is exactly what I wanted.

How should I fix this?

Thanks.

Answer 1

I must follow the convention from the .sortable().

Change the markup to this:

<ul class="sortable_list">

</ul>
<p><a>Add new item</a></p>

<ul class="sortable_list">
  <li class="sortable_item">
    AAA
  </li>
  <li class="sortable_item">
    BBB
  </li>
</ul>
<p><a>Add new item</a></p>