获取 class 中元素的特定属性的当前顺序作为 jquery-ui 中的数组 sortable

Question

我正在尝试获取 jquery-ui 可排序元素的属性数组。

下面是我试过的代码

$(".topic_keywords").sortable();

$(".box-item").draggable();    

var keywordOrder = $(".topic_keywords").sortable("toArray", {attribute: 'data-id'});

console.log(keywordOrder);

这是元素

<ul class="topic_keywords" data-id="1">
      <li class="box-item" data-id="1">Item 1</li>
      <li class="box-item" data-id="2">Item 2</li>
</ul>
<ul class="topic_keywords" data-id="2">
    <li class="box-item" data-id="3">Item 3</li>
    <li class="box-item" data-id="4">Item 4</li>
</ul>

但是，我只得到第一个可排序的有序数组 class。我怎样才能从我目前正在排序的 class 的元素中获取数组？

Answer 1

要获取当前正在排序的项目的顺序，我建议使用 update event。

update( event, ui )
This event is triggered when the user stopped sorting and the DOM position has changed.

这是一个演示：

$(".topic_keywords").sortable({

  update: function(event, ui) {

    var keywordOrder = $(this).sortable("toArray", {
      attribute: 'data-id'
    });

    console.log(keywordOrder);

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<ul class="topic_keywords" data-id="1">
  <li class="box-item" data-id="1">Item 1</li>
  <li class="box-item" data-id="2">Item 2</li>
</ul>
<ul class="topic_keywords" data-id="2">
  <li class="box-item" data-id="3">Item 3</li>
  <li class="box-item" data-id="4">Item 4</li>
</ul>

获取 class 中元素的特定属性的当前顺序作为 jquery-ui 中的数组 sortable

Get the current order of specific attribute of elements in class as array in jquery-ui sortable

jquery

jquery-ui

jquery-ui-sortable