Question

I am trying to get drag and drop to work correctly in that I have the following assigned to all the <li> tags:

$('li').draggable( {
    containment: $selMemContainer,
    cursor: 'move',
    snap: $selMemContainer
  } );

When I try to drag and drop one of the <li>‘s to another location with it’s parent <ul> it disappears from the display but still occupies the original location when looking within firebug but now has left and top values within the style definition (see below). You can see that I tried to move <li> item 1,2 and 4 and if I get rid of the left and top values within firebug then the <li> reappears within the browser.
How can I get drag and drop to work correctly.

<div id="selMembersContainerDiverFieldAdmin2Photographs" class="membersContainer selMembersContainer" style="height: 351px;">
    <ul>
        <li class="ui-draggable" style="position: relative; left: -1237px; top: -309px;">
        <li class="ui-draggable" style="position: relative; left: -1237px; top: -353px;">
        <li class="ui-draggable" style="position: relative;">
        <li class="ui-draggable" style="position: relative; left: -1237px; top: -441px;">
        <li class="ui-draggable" style="position: relative;">
        <li class="ui-draggable" style="position: relative;">
    </ul>
</div>

Answer 1

It seems you need to use sortable instead of draggable. Sortable makes the element drag and contains them to the list. You are also allowed to drag between lists.

Example