jQuery UI Droppable - 根据保存的列表显示默认元素（并添加额外的拖放区）

Question

我当前设置的完整 JSFiddle：https://jsfiddle.net/w27g3xp2/1/

您会看到有一个带有一些预定义值的输入框。目标是根据字段中的输入创建和定位 4 个可放置元素，以便它们显示在下拉框中。目前，当我从列表中拖放一个元素时，输入字段被完全清除。

另一个挑战是“+”，它成功地添加了额外的拖放区，但这些区域没有注册为 "droppable" 区，因此它们目前没有用。非常感谢任何指示、提示或文档。

代码：

$(".social-msl-link-label").draggable({
    connectToSortable: ".social-msl-group-list",
    revert: "invalid",
    helper: "clone"
});

var orderMSLids = [];
$(".social-msl-links-order li.social-msl-drop").droppable({
    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).html().trim() === $(ui.draggable).html().trim();
        }).empty();

        // edited
        str = [];
        $(".social-msl-links-order li").each(function( index ) {
            //console.log( index + ": " + $( this ).children().attr('id') );
            var res = $( this ).children().attr('id');
            if (res) {
                str.push(res);
            }
        });

        var string = str.join(",");
        console.log(string);
        $('#msl-order').val(string);

    }
});

$('.social-msl-add').click(function() {
    $('<li class="social-msl-drop"></li>').insertBefore('.social-msl-add');
});

Answer 1

对于您的第一个问题，您可以简单地检索 #msl-order 元素的 value 属性，根据 , 分隔符拆分值，迭代返回值，然后克隆相应的元素并将其附加到第一个空的可放置容器：

Updated Example

$('#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);
  }
});

对于第二期，您需要 re-initialize 可放置设置。在下面的示例中，我将初始可放置设置对象保存在名为 droppableOptions 的变量中，然后在插入新元素之前初始化这些选项：

Updated Example

$('.social-msl-add').click(function() {
  var $droppable = $('<li class="social-msl-drop"></li>').droppable(droppableOptions);
  $droppable.insertBefore('.social-msl-add');
});

jQuery UI Droppable - 根据保存的列表显示默认元素（并添加额外的拖放区）

jQuery UI Droppable - Show default elements based on saved list (& add extra drop zones)

jquery

jquery-ui

input

droppable