如果项目已经有一些子项，jQuery UI sortable将阻止放入已连接的sortable

Question

我需要你的帮助。我目前正在尝试制作一个可排序的项目列表。每个项目也可以是另一个项目的子项目：

(function ( $ ) {
$( document ).ready( function () {
$( '#import-sort-wrapper' ).sortable( {
placeholder: 'sortable-placeholder',
connectWith: '.import-sort-item-variations',
start: function ( e, ui ) {
ui.placeholder.height( ui.item.height() );
},
beforeStop: function ( e, ui ) {
console.log( 'before stop' );
// Check if product has already variations
if (ui.item.find( '.import-sort-item-variations:first li' ).length > 0) {
$( ui.sender ).sortable( 'cancel' );
}
},
stop: function ( e, ui ) {
let itemVariations = ui.item.find( '.import-sort-item-variations:first' );
// Check if item is variable product and display / hide variations list
if (ui.item.closest( '.import-sort-item-variations' ).length === 1) {
// itemVariations.empty();
itemVariations.hide();
} else {
itemVariations.show();
}
}
} );
$( '.import-sort-item-variations' ).sortable( {
placeholder: 'sortable-placeholder',
connectWith: '#import-sort-wrapper',
start: function ( e, ui ) {
ui.placeholder.height( ui.item.height() );
},
stop: function ( e, ui ) {
let itemVariations = ui.item.find( '.import-sort-item-variations:first' );
// Show variation option again in case item is moved out of variation list
if (ui.item.closest( '.import-sort-item-variations' ).length === 0) {
itemVariations.show();
}
}
} );
} );
});

#import-sort-wrapper {
text-align: left;
display: flex;
flex-direction: column;
list-style-type: none;
margin: 0;
padding: 0;
}
#import-sort-wrapper li {
font-size: 14px;
line-height: 1.5;
position: relative;
padding: 10px 15px;
margin: 9px 0 0;
cursor: move;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
}
#import-sort-wrapper li.import-sort-item {
background: #f6f7f7;
border: 1px solid #dcdcde;
}
#import-sort-wrapper li.import-sort-item .import-sort-item-header .sort-item-header-id {
font-weight: 600;
}
#import-sort-wrapper li.import-sort-item .import-sort-item-header .sort-item-header-type {
color: #50575e;
font-style: italic;
font-weight: 400;
margin-left: 4px;
font-size: 13px;
}
#import-sort-wrapper li.import-sort-item .import-sort-item-variations {
border: 1px solid #dcdcde;
min-height: 30px;
background: #ffffff;
margin-top: 10px;
}
#import-sort-wrapper li.import-sort-item .import-sort-item-variations li {
margin: 10px;
}
#import-sort-wrapper li.ui-sortable-placeholder {
border: 1px dashed #c3c4c7;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="import-sort-wrapper">
<li class="import-sort-item">
<span class="import-sort-item-header">
<span class="sort-item-header-id">30:</span>
<span class="sort-item-header-name">Testprodukt</span>
<span class="sort-item-header-type">Variables Produkt</span>
</span>
<ul class="import-sort-item-variations">
</ul>
</li>
<li class="import-sort-item">
<span class="import-sort-item-header">
<span class="sort-item-header-id">28:</span>
<span class="sort-item-header-name">Erdbeeren</span>
<span class="sort-item-header-type">Variables Produkt</span>
</span>
<ul class="import-sort-item-variations">
</ul>
</li>
<li class="import-sort-item">
<span class="import-sort-item-header">
<span class="sort-item-header-id">29:</span>
<span class="sort-item-header-name">Variables Produkt</span>
<span class="sort-item-header-type">Variables Produkt</span>
</span>
<ul class="import-sort-item-variations">
</ul>
</li>
</ul>

现在，我想以某种方式防止将已经有一些子元素的元素拖到另一个主元素中。只有当应该拖动的元素没有子元素时才有可能我试过检查beforeStop回调中的一些内容，但不知怎么的，我没有让它正常工作。有什么想法吗？也许我走错了路，这是不可能的。。。

Answer 1

如果您更改代码

beforeStop: function ( e, ui ) {
console.log( 'before stop' );
// Check if product has already variations
if (ui.item.find( '.import-sort-item-variations:first li' ).length > 0) {
$( ui.sender ).sortable( 'cancel' );
}
},

收件人：

beforeStop: function ( e, ui ) {
console.log( 'before stop' );
// Check if product has already variations
if (ui.item.find( '.import-sort-item-variations:first li' ).length > 0) {
$( '#import-sort-wrapper' ).sortable('cancel')
}
},

这就是你想要的吗？

Answer 2

我找到了解决方案。感谢Funky的提示。此外，我已经将函数移动到子可排序，并使用了不同的回调received，因为sortable('cancel')在beforeStop:中使用时会导致一些JS错误

receive: function ( e, ui ) {
console.log( ui.sender );
// Check if product has already variations
if (ui.item.find( '.import-sort-item-variations:first li' ).length > 0) {
$( '#product-import-sort-wrapper' ).sortable( 'cancel' );
}
}