Использование Sortable на динамически создаваемом UL - PullRequest
Новая
       21

Использование Sortable на динамически создаваемом UL

0 голосов
/ 19 октября 2018

Вероятно, это простой вопрос для тех, кто регулярно использует JQuery.Я просто читаю список из S3 в массив и использую 

document.getElementById('my-list').appendChild(makeUL(options));

для создания ul внутри div с идентификатором my-list.Это выглядит примерно так: 

<div id="my-list">
    <ul id="sortable">
        <li class="ui-state-default">LivePD</li>
        <li class="ui-state-default">Football</li>
        <li class="ui-state-default">Walking Dead</li>
        <li class="ui-state-default">Survivor</li>
        <li class="ui-state-default">The Voice</li>
        <li class="ui-state-default">Shark Tank</li>
        <li class="ui-state-default">DWTS</li>
        <li class="ui-state-default">RHOOC</li>
    </ul>
</div>

У меня есть сортируемая функция: 

<script>
    $(function() {
        $("#sortable").sortable();
        $("#sortable").disableSelection();
    });
</script>

Вот проблема.Если я жестко запрограммирую ul в свое тело HTML, как показано выше, сортируемый код работает нормально.Он добавляет сортируемый класс ui к элементам ul и li, как и положено.Если я динамически создаю ul с использованием getElementById, базовый HTML-код отображается точно так же, но сортируемый не добавляет классы.

Имеет ли это какое-то отношение к порядку выполнения DOM?Я просто не могу понять это и не могу найти другой пример этого нигде.Полностью открыты и для других идей.

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

Пожалуйста, просмотрите:

Метод сортировки API jQuery UI API

В нем говорится:

Обновление сортируемых элементов.Запускает перезагрузку всех сортируемых элементов, вызывая распознавание новых элементов.

При динамическом добавлении элементов вы добавляете их до инициализации Sortable или после.Если это было сделано ранее, вы просто собираете элементы списка, а затем вызываете sorttable.Если после, добавьте элементы, а затем запустите метод обновления.

Это довольно сложный пример, но он предполагает, что вы добавляете элементы из списка на основе API и, возможно, добавляете больше элементов позже. 

$(function() {
  var extData = [{
    label: "LivePD",
    id: 1
  }, {
    label: "Football",
    id: 2
  }, {
    label: "Walking Dead",
    id: 3
  }, {
    label: "Survivor",
    id: 4
  }, {
    label: "The Voice",
    id: 5
  }, {
    label: "Shark Tank",
    id: 6
  }, {
    label: "DWTS",
    id: 7
  }, {
    label: "RHOOC",
    id: 8
  }];

  function updateList(data, target) {
    var sort = target.find(".sortable");
    console.log(data, sort);
    $.each(data, function(k, v) {
      $("<li>", {
        class: "ui-state-default",
        id: target.attr("id") + "-item-" + v.id
      }).html(v.label).appendTo(sort);
    });
    if (sort.hasClass("ui-sortable")) {
      sort.sortable("refresh");
    }
  }

  updateList(extData, $("#my-list"));
  $(".sortable").sortable();
  $(".sortable").disableSelection();
  $(".add").click(function(e) {
    var dlg = $("<div>", {
      title: "Add To " + $(this).parent().find("p").text()
    });
    var that = $(this);
    dlg.append(
      $("<label>").html("Name"),
      $("<input>", {
        type: "text",
        class: "name txt"
      }),
      $("<label>").html("ID"),
      $("<input>", {
        type: "input",
        class: "id txt"
      })
    );
    dlg.dialog({
      modal: true,
      buttons: [{
        text: "Ok",
        click: function() {
          var d = [{
            label: $(this).find(".name").val(),
            id: $(this).find(".id").val()
          }];
          updateList(d, that.parent());
          $(this).dialog("close");
          $(this).remove();
        }
      }, {
        text: "Cancel",
        click: function() {
          $(this).dialog("close");
          $(this).remove();
        }
      }]
    });
  });
});
.sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

.sortable li {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
}

.sortable li span {
  position: absolute;
  margin-left: -1.3em;
}

.ui-dialog-content label {
  display: block;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div id="my-list">
  <p>My List</p>
  <ul class="sortable">
  </ul>
  <button id="my-list-add-btn" class="add btn">Add</button>
</div>

Если у вас более 1 списка, этот код работает очень хорошо, так как позволяет использовать одну и ту же функцию для множества разных списков.

Надеюсь, это поможет.

0 голосов
/ 19 октября 2018

Я просто звоню 

$("#sortable").sortable(); $("#sortable").disableSelection();

каждый раз после динамического заполнения.

Удачного кодирования.

...