jQuery UI Droppable - 在输入字段中存储元素顺序

Question

Link 设置：https://jsfiddle.net/7b8bqzsh/1/

可以使用上面的 link 查看完整的工作示例。计划是将 link 的顺序存储到输入字段中，以便可以将其保存到数据库中。

目前有ID拉入输入框，但只显示最新的ID。有没有办法让它成为一个存储变量数组，按照它们在可放置元素中的顺序显示，并用逗号分隔？

代码：

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

var orderMSLids = [];
$(".social-msl-links-order li").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).text().trim() === $(ui.draggable).text().trim();
        }).empty();
        $('#msl-order').val(orderMSLids);
    }
});

Answer 1

我修改了你的jsFiddle。

如您所见，我应用的逻辑是遍历列表中克隆拖动元素的所有项目，因此我选择它们并按正确顺序排列。

创建一个 ID 数组，然后进行连接，将逗号夹在中间。

希望对你有所帮助

您删除的代码：

$('#msl-order').val(orderMSLids);

我的代码：

// 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);

Working JSFinddle

完整的工作示例

你已经下定决心了。

添加了更多代码

$(this).empty(); // added to remove previous content

Complete Working JSFinddle

jQuery UI Droppable - 在输入字段中存储元素顺序

jQuery UI Droppable - storing element order in input field

html

jquery

jquery-ui

input

droppable