使用 Jquery .sortable 同时对两个 javascript 数组进行排序

Question

我有一个 Js 数组 picInfos 和 html 列表。每个数组和列表元素相互对应。我想用 list 同时对 picInfos 数组进行排序，它由 jQuery 可排序函数排序。

var picInfos = [];

$(document).ready(function() {
function readURL(input) {
    var $selected_images_list = $('.selected_images_list ul');
if (input.files) {
  var picInfo = [];
  for (var o = 0; o < input.files.length; o++) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $selected_images_list.append(
        '<li>' +
        '<div class="img_wrapper">' +
        '<img src=' + e.target.result + ' alt="">' +
        '</div>' +
        '</li>');
      picInfo.push(e.target.result);
    }
    reader.readAsDataURL(input.files[o]);
    picInfo.push(input.files[o].name);

     }
    picInfos.push(picInfo);
   }
  }

 $(function() {
  $(".selected_images_list ul").sortable({
   connectWith: $(this).find('li')
  }).disableSelection();
 });

Answer 1

您应该使用 sortable change 事件，它会在排序列表更改时发生。您需要 re-build 您的 picInfos 列表更改数组

$(function() {
  $(".selected_images_list ul").sortable({
    connectWith: $(this).find('li'),
    change: function (event, ui) {
      // here your the code that re-builds the array
    }
  }).disableSelection();
});

使用 Jquery .sortable 同时对两个 javascript 数组进行排序

Sort two javascript arrays simultaneously with Jquery .sortable

javascript

jquery

jquery-ui-sortable