jQuery с использованием Sortable с динамически добавляемыми элементами (обновление в реальном времени)

У меня есть <form id="#form">, у которого есть <span class="con">, и внутри диапазона у меня много div, которые нужно сортировать.

<form id="form">
    <span class="con">
        <div class="ui-state-highlight">Item 1</div>
        <div class="ui-state-highlight">Item 2</div>
        ... 
    </span>
</form>

Я использую функцию сортировки, чтобы сделать div Sortable.

$("span").sortable({
    connectWith: ".con"
}).disableSelection();

Я динамически добавляю div внутри. Но sortable не распознает недавно добавленные интервалы. Я знаю, что есть опция refresh для сортировки, которая должна работать как live() и распознавать недавно добавленный контент, но я не понимаю, как я могу использовать ее в этом примере.

Проверьте http://jsfiddle.net/mRyVp/8/. Нажмите на кнопку, чтобы добавить больше промежутков с элементами div внутри. Вы увидите, что вы можете сортировать div, которые изначально были в DOM, но не добавленные недавно.


jquery refresh live jquery-ui jquery-ui-sortable
person Pinkie    schedule 29.03.2011    source источник
comment
кажется, что у вас есть несколько сортируемых <span>, которые, конечно, не будут работать как одна группа.   -  person Santosh Linkha    schedule 29.03.2011
comment
@experimentx, да, вы можете подключить несколько пролетов. Посмотрите пример здесь jqueryui.com/demos/sortable/#event-update. Поскольку спаны добавляются динамически, это не работает, иначе, если все изначально было в DOM, это сработает.   -  person Hussein    schedule 29.03.2011
comment
@Hussein, кажется, ты прав, я еще раз посмотрю код.   -  person Santosh Linkha    schedule 29.03.2011
comment
Я думал, что refresh должен обновлять динамически добавляемый контент, но он не работает $('span').sortable('refresh')   -  person Pinkie    schedule 29.03.2011
comment
разве ваш <span> не должен быть <div>? или ваши <div> будут <span>ами?   -  person Walf    schedule 16.05.2011

Ответы (3)


arrow_upward
10
arrow_downward

Кажется, у вас есть class="connectedSortable" в

<span class="connectedSortable">
    <div class="ui-state-highlight">Item 1</div>
    <div class="ui-state-highlight">Item 2</div>
    ... 
</span>

И connectWith: ".con" в

$("span").sortable({
    connectWith: ".con"
}).disableSelection();

Добавление класса con в исходный div будет в порядке. Обновите здесь.

person Santosh Linkha    schedule 29.03.2011
comment
Спасибо, эксперимент +1. но это немного неудобно. Вы используете сортировку дважды, один раз внутри функции щелчка и один снаружи. Мы должны использовать его только один раз, а затем использовать опцию обновления. - person Pinkie; 29.03.2011
comment
@Pikie, хорошо, я еще раз проверю. - person Santosh Linkha; 29.03.2011
comment
@Pinkie хорошо, недавно созданный <span> не имеет связанной с ним функции sortable, поэтому мы должны зарегистрировать его снова (после его создания), иначе он не будет работать. - person Santosh Linkha; 29.03.2011

arrow_upward
1
arrow_downward

Попробуй это:

$('button').click(function() {
    var x = $('<div class="ui-state-highlight">Item '+($('.con div').length+1)+'</div>');
    x.appendTo('#form .con')
});

$("span").sortable({
    connectWith: ".con"
}).disableSelection();

Когда вы нажимаете «добавить другой вариант», скрипт добавит в список новый сортируемый «Элемент».

person Nick    schedule 31.07.2011

arrow_upward
0
arrow_downward

Измените событие нажатия кнопки, как указано ниже, и оно работает. Никаких других изменений не требуется. Я попробовал в jfiddler, и это сработало. Недавно добавленные элементы становятся частью списка и также могут быть отсортированы.

$('button').click(function() {
    var x = $('<div>aaaaaaaaa</div>');
    x.appendTo('#form .con')
});

Я определил x как элемент, а затем x добавляется к классу ".con" внутри #form.

Скриншот этого обновленного примера показан ниже:

введите здесь описание изображения

person Rahul Varadkar    schedule 09.08.2017