Сортируемый пользовательский интерфейс jQuery не работает с HTML-данными ajax

0

Я новичок в jquery, и по какой-то причине мой сортируемый список не работает с sortable

я просто тренируюсь

мой код

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

$.ajax({
      url: baseUrl+'/loadFields/,
      dataType: "html",
      success: function(data)
      {
        $('#fields').html(data);
      }
    });

div, где данные загружаются

<div id="fields"></div>

и html файл, в котором содержится список

<ul class="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

И когда я пытаюсь перетащить, ничего не происходит, если я не загружаю html с помощью ajax и делаю это так

<div id="fields">
<ul class="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</div>

он отлично работает

Может ли кто-нибудь сказать мне, как использовать его с данными ajax?

  • 0
    Динамическое создание элементов не имеет значения, когда дело доходит до sortable списков, если вы правильно идентифицируете списки и тщательно обрабатываете все свойства события. Смотрите мой ответ ниже
Теги:
jquery-ui-sortable

1 ответ

1
Лучший ответ

HTML

<div id="fields">
<ul class="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</div>

CSS

.ui-icon {float:left;margin-right:8px;}

JQuery

$(".sortable").sortable("refresh"); // add this line to "re-load" the sortable list after populating
$(".sortable").ready(function() {
  $( ".sortable" ).sortable(
      {
          handle: '.ui-icon-arrowthick-2-n-s',
          items: 'li',
          containment: '#fields',
          forceHelperSize: true,
          forcePlaceHolderSize: true,
          start: function(e, ui) {
              ui.item.addClass('ui-state-highlight');
          },
          stop: function(e, ui) {
              ui.item.removeClass('ui-state-highlight').effect('highlight',{},2000);;
          },
          update: function() {
              $('.sortable').sortable('refreshPositions');
          }
      }
  );
});

Работа jsFiddle

Поделиться
  • 0
    вы совершенно не так поняли меня, он не работает с вашим кодом, потому что я загружаю свои данные с помощью AJAX, если я не загружаю их с помощью ajax, это работает, но с загрузкой AJAX это не
  • 0
    @ user1512390 Ты уверен? Я динамически заполняю все свои сортируемые списки, и все они, кажется, работают нормально. Возможно, вам следует проверить, является ли список DOMReady, прежде чем пытаться использовать метод .sortable() .
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню