Блог

Главная - Вопросы по программированию - Как я могу добавить атрибут к новому LI после удаления

Как я могу добавить атрибут к новому LI после удаления

#jquery #jquery-ui #clone #jquery-ui-sortable #jquery-ui-draggable

#jquery #jquery-пользовательский интерфейс #клонировать #jquery-ui-сортируемый #jquery-ui-перетаскиваемый

Вопрос:

У меня есть 2 списка:

 <h3>Available page layouts</h3>

<ul id="pagepool" class="connectedSortable">
    <li id="I1" class="ui-state-default"></li>
    <li id="I2" class="ui-state-default"></li>
    <li id="I3" class="ui-state-default"></li>
    <li id="I4" class="ui-state-default"></li>
    <li id="I5" class="ui-state-default"></li>
</ul>

<h3>Document structure</h3>

<ul id="docstruct" class="connectedSortable"></ul>

Элементы из списка «pagepool» перетаскиваются (клонируются) в список «docstruct» и затем могут быть отсортированы вручную. В списке docstruct могут быть дублирующиеся стили страниц (с дублирующимися атрибутами id).

Что я хотел бы сделать, это запросить уникальный хэш md5 через php-файл / ajax и добавить этот хэш к атрибуту rel удаляемого элемента после удаления элемента. Все, что я пробовал до сих пор, обновляет исходный элемент «pagepool».

Как я могу изменить это, чтобы оно предназначалось только для клонированного элемента?:

 $( "#pagepool li" ).draggable({

           connectToSortable: '#docstruct',
           helper: 'clone',
           revert: 'invalid',
           opacity: '.7'

                              });

$( "#docstruct" ).sortable({
           placeholder: "ui-state-highlight",
           revert: true,
           receive: function(event, ui) {
           $.get('ajax/uniqid.php', function(data){ui.item.attr('rel', data)})     
                                                }       
                          });

Комментарии:

1. Во-первых, никакие два элемента в вашем HTML не могут использовать один и тот же идентификатор. Прямо сейчас это сломает практически все. Во-вторых, в чем смысл MD5?

2. Согласен с Адамом — я думаю, что плагины с возможностью сортировки / перетаскивания, скорее всего, используют идентификаторы для целевых элементов, и поэтому выбираются неправильные. Можете ли вы использовать атрибут, отличный от «id» для каждого li? В HTML5 предусмотрены атрибуты data-{something} для хранения таких вещей, как идентификаторы.

3. 1 для Adam и wows. Также вы не должны использовать атрибут ‘rel’, он действителен только для тегов ‘a’ и ‘link’, насколько я знаю. Вместо этого используйте что-то вроде ui.item.data («хэш», данные).

4. так просто, да?! Переместил идентификаторы в class, и все работает нормально, спасибо!

5. причина md5 в том, что я настраиваю здесь схему документа; каждая страница имеет связанный объект записи (содержащий данные поля), который в конечном итоге будет сохранен в базе данных вместе с хэшем. мне нужен был какой-то способ идентифицировать вновь созданные страницы в будущем, чтобы облегчить обновление порядка сортировки и т. Д

Ответ №1:

Не уверен, почему это так, но вот что я нашел.

В событии получения вы не можете получить доступ к фактическому элементу, который создается в сортируемом списке. Помощник указывает на клон, который используется только для перетаскивания, элемент — это исходный элемент, на который вы нажали, чтобы перетащить.

Но событие beforeStop срабатывает непосредственно перед событием приема. В beforeStop элемент фактически является элементом в списке. Итак, в beforeStop вы можете сохранить элемент, а затем использовать его в receive.

Демонстрация здесь:http://jsfiddle.net/kcg29 /