javascript - JQuery：限制拖放元素的范围

Question

我正在使用 UIKit 可排序插件来实现 Html 元素的拖放功能。我有 2 组元素可以拖放到一个 html 文档中。一组是可拖动的卡片，每个卡片都有一个按钮来切换其模态的可见性，另一组是每个卡片的模态内的可拖动图像。

我以 JQuery 方式“移动文档”来检测卡片组的拖放事件，但其范围与模态中的可拖动图像的范围冲突。

我想问题出在JS代码中。如何控制这 2 组项目的范围，使它们不相互冲突？谢谢！

以下是我的前端代码。

这是控制可拖动项目范围的 JS 代码

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

我知道我可以编码如果文档中的条件被移动以拆分 2 组元素的拖放事件的控制，但这种方法并不那么优雅。如果可能的话，我想避免这种情况。

我尝试了 ul 元素的 id 或类选择器，其中包含可拖动项目而不是“文档”。仅当'document' 在$() 中时，才会调用 onmoved 事件的回调函数。

顺便说一句，卡片的 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>

这是 UIKit 可排序插件的 JS 文档，但我不确定如何控制可拖动元素的范围。 https://getuikit.com/docs/sortable#javascript

标签： javascriptjqueryhtmldomfrontend