jQuery UI 可放置 - 如何每个放置区只允许 1 个元素，而不是堆叠

jQuery UI Droppable - How to allow only 1 element per drop zone, instead of stacking

本文关键字：元素 UI 置区 何每个 jQuery      更新时间：2023-09-26

我当前的脚本：https://jsfiddle.net/uoyp37bj/11/

问题是，目前可以通过将它们相互堆叠来"堆叠"可放置元素。我正在尝试这样做，以便只有最新放置的元素保留在那里，并且删除任何以前的元素。

我最初只是使用 CSS "隐藏"其他项目，但由于我使用输入框来跟踪拖放区域中存在哪些项目，这不再可能。任何帮助将不胜感激，希望它在jQuery UI API中相对简单，但目前没有任何工作对我有用。

$(".social-msl-link-label").draggable({
  connectToSortable: ".social-msl-group-list",
  revert: "invalid",
  helper: "clone"
});
var orderMSLids = [];
var droppableOptions = {
  accept: ".social-msl-link-label",
  tolerance: 'pointer',
  greedy: true,
  hoverClass: 'highlight',
  drop: function(ev, ui) {
    orderMSLids = [];
    $(ui.draggable).clone(true).detach().css({
      position: 'relative',
      top: 'auto',
      left: 'auto'
    }).appendTo(this);
    orderMSLids.push($(this).find('.social-msl-link-label').attr('id'));
    $(this).siblings().filter(function() {
      return $(this).text().trim() === $(ui.draggable).text().trim();
    }).empty();
    str = [];
    $(".social-msl-links-order li").each(function(index) {
      var res = $(this).children().attr('id');
      if (res) {
        str.push(res);
      }
    });
    var string = str.join(",");
    $('#msl-order').val(string);

  }
};
$(".social-msl-links-order li.social-msl-drop").droppable(droppableOptions);
$('.social-msl-add').click(function() {
  var $droppable = $('<li class="social-msl-drop"></li>').droppable(droppableOptions);
  $droppable.insertBefore('.social-msl-add');
});
$('#msl-order').prop('value').split(',').forEach(function(id) {
  var $droppable = $('.social-msl-drop.ui-droppable:empty').first();
  if (id) {
    $('.draggable #' + id).clone(true).appendTo($droppable);
  }
});

只是有一个想法，但没有进展 - 也许可以迭代"drop"调用中的所有元素，并删除任何重复项。在此循环中，还可以检查是否有任何拖放区有 2 个元素并删除除 1 个元素之外的所有元素。不知道如何编写脚本，但最初的逻辑对我来说是有意义的。

不要将可拖动内容附加到可拖放，只需将其整个内容替换为可拖动内容，如下所示：

$(this).html(ui.draggable.clone(true).css({
  position: 'relative',
  top: 'auto',
  left: 'auto'
}));

而不是：

 $(ui.draggable).clone(true).detach().css({
  position: 'relative',
  top: 'auto',
  left: 'auto'
}).appendTo(this);
相关文章：