Сортируемые контейнеры/границы

Question

Я пытаюсь создать границы для моих сортируемых элементов. Я видел этот вопрос/ответ:

jquery sortable keep within container Boundary

и попытался основать свои JS от этого, но по какому-то причине, когда я добавить контейнер вокруг моего UL я теряю верхнее и нижнее удержание, и пользователь может перетащите элементы за пределами cotnainer:

Correct Containment Fiddle

My Wrong Containment Fiddle

Эй надувать надувать, вот код без скрипки:

Работая

$(function() {  
 
     $(".sortable").sortable({ 
 
      axis: 'y', 
 
      containment: "parent" 
 
     }).disableSelection(); 
 
    });

ul{ 
 
    margin:20px 0 0 20px; 
 
    border:1px solid #000; 
 
    width:70%; 
 
    overflow:hidden; 
 
    position:relative; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
li{ 
 
    background:#ccc; 
 
    border-top:1px solid #000; 
 
    padding:10px 5px; 
 
    cursor:move; 
 
} 
 
li:first-child{ 
 
    border-top:0; 
 
} 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 
 
<ul class="sortable"> 
 
    <li>first item</li> 
 
    <li>second item</li> 
 
    <li>third item</li> 
 
    <li>fourth item</li> 
 
    <li>fifth item</li> 
 
</ul>

не работает

jQuery(document).ready(function($) { 
 
\t \t \t $(".sort").sortable({ 
 
\t \t \t \t axis: \t \t \t 'y', 
 
\t \t \t \t containerment: \t 'parent' 
 
\t \t \t }).disableSelection(); 
 
\t \t });

ul{ 
 
    margin:20px 0 0 20px; 
 
    border:1px solid #000; 
 
    width:70%; 
 
    overflow:hidden; 
 
    position:relative; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
li{ 
 
    background:#ccc; 
 
    border-top:1px solid #000; 
 
    padding:10px 5px; 
 
    cursor:move; 
 
} 
 
li:first-child{ 
 
    border-top:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 
 

 
<div id="sortWrapper"> 
 
    <ul class="sort"> 
 
     <li>first item</li> 
 
     <li>second item</li> 
 
     <li>third item</li> 
 
     <li>fourth item</li> 
 
     <li>fifth item</li> 
 
    </ul> 
 
</div>

В чем разница между двумя блоками кода, из-за которых неработающие элементы покидают контейнер?

Answer 1

Вы печатаете 'сдерживание' в javascript второго.