JQuery: ограничить область перетаскивания элементов

Question

Я использую сортируемый плагин UIKit для функции перетаскивания элементов HTML.Я получил 2 группы элементов, которые можно перетаскивать в одном HTML-документе.Одна группа перетаскиваемых карточек, у каждой из которых есть кнопка, чтобы переключать видимость ее модального режима, а другая группа - перетаскиваемые изображения внутри модала для каждой карточки.обнаружить событие перетаскивания группы карт, но его область действия совпадает с областью действия перетаскиваемого изображения в модальных режимах

Я думаю, проблема в коде JS.Как контролировать объем этих 2 групп предметов, чтобы они не конфликтовали друг с другом?Спасибо!

Вот мой код внешнего интерфейса.

Это код JS, который контролирует область перетаскиваемых элементов

$(document).on('moved', '.uk-sortable', function(e) {
...
}

Я знаю, что могу кодироватьЕсли условие внутри документа перемещено, чтобы разделить элемент управления перетаскиванием для двух групп элементов, но этот подход не так уж и элегантен.Я хотел бы избежать этого, если это возможно.

Я попробовал селектор идентификатора или класса элемента ul, включающего перетаскиваемые элементы, вместо «документа».Функция обратного вызова события on move была вызвана только тогда, когда «document» было в $ ().

Кстати, структура Html-карт такая.(Такие символы, как {{}} являются лишь частью шаблона файла Laravel Blade, но эта проблема не имеет прямого отношения к Laravel)

<ul id="ul-pj" class="uk-grid-small uk-child-width-1-2 
  uk-child-width-1-4@s" uk-sortable="handle: .uk-card" uk-grid>
@foreach ($projects as $item)
    <li id="li-{{ $item->id }}">
        <div class="uk-card card border-s4d" id="pj_card-{{ $item->id }}">
               ...
        </div>
    </li>
@endforeach
</ul>

Структура HTML перетаскиваемых изображений содержит модальные для каждой карты

<div class="modal modal-lg fade" id="staff_order_modal-{{ $item->id }}" tabindex="-1" role="dialog" aria-labelledby="staff_order_modal_label-{{ $item->id }}" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h3 class="modal-title" id="staff_order_modal_label-{{ $item->id }}">{{ $item->name }}</h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <ul id="staff_order_ul-{{ $item->id }}" class="uk-grid-small uk-child-width-1-6 uk-child-width-1-6@s" uk-sortable="handle: .uk-sortable-staff" uk-grid>
                @foreach($item->staff as $staff_item)
                <li id="staff_order_li-{{ $staff_item->id }}">
                    @if (!empty($staff_item->photo_label))
                        <img id="pj_{{ $item->id }}_modal_staff-{{ $staff_item->id }}" class="rounded ctr-img uk-card uk-card-default uk-sortable-staff" style=" max-width:3.2em;max-height:3.2em;" src="{{ asset(config('img.avatar_staff'). $staff_item->photo_label) }}" alt="{{ $staff_item->name }}" />
                    @else
                        <img id="pj_{{ $item->id }}_modal_staff-{{ $staff_item->id }}" class="rounded ctr-img uk-card uk-card-default uk-sortable-staff" style="max-width:3.2em;max-height:3.2em;" src="{{ URL::asset('img/logo.png') }}" alt="{{ $staff_item->name }}" />
                    @endif
                </li>
                @endforeach
            </ul>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-primary pj-staff-save" id="pj_staff_save-{{ $item->id }}">Save</button>
          </div>
        </div>
      </div>
    </div>

Это документ JS для сортируемого плагина UIKit, но я не уверен, как управлять областью перетаскиваемых элементов.https://getuikit.com/docs/sortable#javascript