Question

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

目前，ID已拉入输入字段，但仅显示最新的ID。有没有办法使这个存储变量数组，以它们在droppable元素中的顺序显示，用逗号分隔？

代码：

$(".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 - 在输入字段中存储元素顺序

1 个答案: