使用jQuery UI更新可排序網格

Question

我有一個使用jQuery UI排序的網格。它分爲兩個層次。

將元素（.sortable-cell）從第2級拖動到第1級後，會在其周圍創建包裝。

<li class="sortable-table">         <-- wrapper 
    <ul class="sortable-row connectedSortable ui-sortable"> <-- wrapper 
     <li class="sortable-cell">Item 5</li>    
    </ul>             <-- wrapper 
</li>              <-- wrapper 

的問題是，sortable()不叫新創建的排序，並且它被不被正確識別。然後，第二級元素（.sortable-cell）無法正確拖動，整行（.sortable-row）被拖動。

如何動態調用sortable()對新創建的可排序項再次傳遞整個參數？

$('.sortable-grid, .sortable-row').sortable({ 
 
    connectWith: '.connectedSortable', 
 
    start: function(event, ui) { 
 
    sender = $(this); 
 
    recvok = false; 
 
    }, 
 
    over: function(event, ui) { 
 
    recvok = ($(this).not(sender).length != 0); 
 
    }, 
 
    stop: function(event, ui) { 
 
    if (!recvok) { 
 
     $(this).sortable('cancel'); 
 
    } 
 
    item = $(ui.item); 
 
    receiver = $(ui.item.parent()); 
 
    console.log(item); 
 
    console.log(receiver); 
 
    if (item.hasClass('sortable-cell') && receiver.hasClass('sortable-grid')) { 
 
    \t item.wrap("<li class='sortable-table'><ul class='sortable-row connectedSortable ui-sortable'></ul></li>"); 
 
    } 
 
    } 
 
});

.sortable-table { 
 
    border: 1px red solid; 
 
    padding: 10px 0px; 
 
    list-style-type: none; 
 
    width: 100% !important; 
 
    display: table !important; 
 
} 
 

 
.sortable-table .sortable-row { 
 
    height: 100% !important; 
 
    display: table-row !important; 
 
    padding: 5px 0px; 
 
} 
 

 
.sortable-table .sortable-cell { 
 
    border: 1px solid green; 
 
    display: table-cell !important; 
 
    cursor: move; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.js"></script> 
 
<ul class="sortable-grid connectedSortable"> 
 
    <li class="sortable-table"> 
 
    <ul class="sortable-row connectedSortable"> 
 
     <li class="sortable-cell">Item 1</li> 
 
     <li class="sortable-cell">Item 2</li> 
 
     <li class="sortable-cell">Item 3</li> 
 
    </ul> 
 
    </li> 
 
    <li class="sortable-table"> 
 
    <ul class="sortable-row connectedSortable"> 
 
     <li class="sortable-cell">Item 4</li> 
 
     <li class="sortable-cell">Item 5</li> 
 
     <li class="sortable-cell">Item 6</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 1

的解決辦法是將這些參數存儲到一個變量sortableParameters，然後將其傳遞到sortable()方法在每次被調用的時間。

var sortableParameters = { 
 
    connectWith: '.connectedSortable', 
 
    start: function(event, ui) { 
 
    sender = $(this); 
 
    recvok = false; 
 
    }, 
 
    over: function(event, ui) { 
 
    recvok = ($(this).not(sender).length != 0); 
 
    }, 
 
    stop: function(event, ui) { 
 
    if (!recvok) { 
 
     $(this).sortable('cancel'); 
 
    } 
 
    item = $(ui.item); 
 
    receiver = $(ui.item.parent()); 
 
    console.log(item); 
 
    console.log(receiver); 
 
    if (item.hasClass('sortable-cell') && receiver.hasClass('sortable-grid')) { 
 
     item.wrap("<li class='sortable-table'><ul class='sortable-row connectedSortable ui-sortable'></ul></li>").parent().sortable(sortableParameters); 
 
    } 
 
    } 
 
} 
 
$('.sortable-grid, .sortable-row').sortable(sortableParameters);

.sortable-table { 
 
    border: 1px red solid; 
 
    padding: 10px 0px; 
 
    list-style-type: none; 
 
    width: 100% !important; 
 
    display: table !important; 
 
} 
 
.sortable-table .sortable-row { 
 
    height: 100% !important; 
 
    display: table-row !important; 
 
    padding: 5px 0px; 
 
} 
 
.sortable-table .sortable-cell { 
 
    border: 1px solid green; 
 
    display: table-cell !important; 
 
    cursor: move; 
 
} 
 
.sortable-table .sortable-cell p { 
 
    display: inline; 
 
    margin: 0 !important; 
 
} 
 
.sortable-table .highlight-vertical { 
 
    width: 5px !important; 
 
    display: table-cell !important; 
 
    background-color: blue !important; 
 
} 
 
.sortable-table .highlight-horizontal { 
 
    height: 5px !important; 
 
    width: 100% !important; 
 
    display: block !important; 
 
    background-color: blue !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.js"></script> 
 
<ul class="sortable-grid connectedSortable"> 
 
    <li class="sortable-table"> 
 
    <ul class="sortable-row connectedSortable"> 
 
     <li class="sortable-cell">Item 1</li> 
 
     <li class="sortable-cell">Item 2</li> 
 
     <li class="sortable-cell">Item 3</li> 
 
    </ul> 
 
    </li> 
 
    <li class="sortable-table"> 
 
    <ul class="sortable-row connectedSortable"> 
 
     <li class="sortable-cell">Item 4</li> 
 
     <li class="sortable-cell">Item 5</li> 
 
     <li class="sortable-cell">Item 6</li> 
 
    </ul> 
 
    </li> 
 
</ul>