Получить текущий порядок определенного атрибута элементов в классе в виде массива в jquery-UI сортируемой - PullRequest
Новая
       26

Получить текущий порядок определенного атрибута элементов в классе в виде массива в jquery-UI сортируемой

0 голосов
/ 30 мая 2019

Я пытаюсь получить массив атрибутов упорядоченных элементов в jquery-ui sortable.

Ниже приведен код, который я пробовал 

$(".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>

Однако я получаю только упорядоченный массив первого сортируемого класса.Как я могу получить массив из того класса, в котором я сейчас сортирую элементы?

1 Ответ

1 голос
/ 30 мая 2019

Чтобы получить порядок элементов, которые в данный момент сортируются, я рекомендую использовать событие обновления .

update (event, ui)
Это событие вызванокогда пользователь прекратил сортировку и позиция DOM изменилась.

Вот демонстрация: 

$(".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>
...