Question

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

我以“移动中的文档”的JQuery方式进行了此操作，以检测卡组的拖放事件，但其作用域与模式中可拖动图像的作用域冲突。

我想问题出在JS代码中。如何控制这两组项目的范围，以免彼此冲突？谢谢！

以下是我的前端代码。

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

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

我知道我可以对文件内部的条件进行编码，以拆分两组元素的拖放事件的控件，但是这种方法不是那么优雅。我想避免这种情况。

我尝试了ul元素的id或class选择器，该元素包含可拖动项而不是'document'。仅当'document'在$（）中时，才调用on move事件的回调函数。

顺便说一句，纸牌的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

jQuery：限制拖放元素的范围

0 个答案: