主页 / 问题 / 1141112
Accepted
De.Minov
Asked:2020-06-15 10:35:15 +0000 UTC2020-06-15 10:35:15 +0000 UTC

通过 JQ UI 和数组对元素进行排序

  • 772

有一个显示元素列表的数组。
可以使用 jQuery UI - 交换元素.sortable()。
问题是如何在排序后改变数组中已排序元素的位置。

let arr = [
  'element 1',
  'element 2',
  'element 3',
  'element 4',
  'element 5'
];

for(let i = 0; i < arr.length; i++) {
  $('.list').append(`<div data-i="${i}">${arr[i]}</div>`);
}

$('.list').sortable();
.list > div.ui-sortable-helper {
  color: green;
}

.list > div {
  cursor: move;
}
<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.0/jquery-ui.min.js"></script>

<div class="list"></div>

jquery

1 个回答

  1. Best Answer

    sortable() 有一系列事件>> https://api.jqueryui.com/sortable/可以在其中传递回调函数。我和他们一起玩了一点，对于这项任务，事件证明是最可靠的stop。change如果您不快速放手对一行中的多个元素进行排序，您就会遇到问题。

    let arr = [
  'element 1',
  'element 2',
  'element 3',
  'element 4',
  'element 5'
];

for(let i = 0; i < arr.length; i++) {
  $('.list').append(`<div data-i="${i}">${arr[i]}</div>`);
}

$('.list').sortable({
  stop: function(e) {
    $('.list div[data-i]').each(function(i) {
      arr[i] = $(this).text();
    });
    console.log(arr);
  }
});
    .list > div.ui-sortable-helper {
  color: green;
}

.list > div {
  cursor: move;
}
    <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.0/jquery-ui.min.js"></script>

<div class="list"></div>

    从上一个答案

    arr = $('.list div[data-i]').toArray().map(el => el.textContent);

    拒绝，因为赋值后，初始数组丢失（理论上可以传递给代码的其他部分）。而当前循环只改变数组的元素。

    • 2

相关问题