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 的提示。此外，我已将该函数移至子 sortable 并使用了不同的回调 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' );
    }
}

如果项目已经有一些子项，则 jQuery UI 可排序防止掉入连接的可排序

2 个答案: