tabs + sortable + draggable

Обсуждаются вопросы по надстройке jQuery UI - официальные виджеты и плагины для организации взаимодействия с элементами интерфейса.

Модераторы: EGORR, Gennady

tabs + sortable + draggable

Сообщение e_vslv » 18 ноя 2010, 11:54

Доброе время суток! Столкнулась со следующей проблемой: динамически создаю вкладки, в каждой из них мне нужны одинаковые draggable, связанные с sortable. Так вот, при динамическом их создании, на всех вкладках, кроме первой, draggable элемент не принимается sortable. Причем я заметила интересную особенность: если попробовать перенести элемент списка вверх, то после этого draggable элемент уже переносится в sortable.
Специально упростила максимально код, чтобы попытаться понять, в чем ошибка. В общем, вот код:
Код: выделить все
      $("#tabs").tabs();
      $("#tabs").tabs("add", "#ui-tabs-0", "1" );
      $("#ui-tabs-0").append('<div class="demo" id = "demo1">');
      $("#demo1").append('<ul id = "ul1">');
      $("#ul1").append('<li id="draggable1" class="ui-state-highlight">Drag me down</li>');
      $("#demo1").append('</ul>');
      $("#demo1").append('<ul id="sortable1">');
      $("#sortable1").append('<li class="ui-state-default">Item 1</li>')
      $("#demo1").append('</ul>');
      $("#ui-tabs-0").append('</div>');
      $("#tabs").tabs("add", "#ui-tabs-1", "1" );
      $("#ui-tabs-1").append('<div class="demo" id = "demo2">');
      $("#demo2").append('<ul id = "ul2">');
      $("#ul2").append('<li id="draggable2" class="ui-state-highlight">Drag me down</li>');
      $("#demo2").append('</ul>');
      $("#demo2").append('<ul id="sortable2">');
      $("#sortable2").append('<li class="ui-state-default">Item 1</li>')
      $("#demo2").append('</ul>');
      $("#ui-tabs-1").append('</div>');
      $( "#sortable2" ).sortable({
         revert: true
      });
      $( "#draggable2" ).draggable({
         connectToSortable: "#sortable2",
         helper: "clone",
         revert: "invalid"
      });
      $( "#sortable1" ).sortable({
         revert: true
      });
      $( "#draggable1" ).draggable({
         connectToSortable: "#sortable1",
         helper: "clone",
         revert: "invalid"
      });   
   });

Не знаю, что и делать, как обойти такое странное поведение...
e_vslv
 
Сообщений: 3
Зарегистрирован: 23 сен 2010, 10:21

Re: tabs + sortable + draggable

Сообщение Gennady » 18 ноя 2010, 17:46

Ключевое слово:
при динамическом их создании
поищите по форумы темы про обработку событий на динамически создаваемых элементах.
Долог путь поучения, короток и успешен путь примеров (Сенека).
I'm a member of jQuery Meetups. jQuery users unite! Connect with other jQuery users... Присоединиться к jQuery Russia.
Аватар пользователя
Gennady
Администратор
 
Сообщений: 1886
Зарегистрирован: 14 янв 2010, 14:36
Откуда: Москва

Re: tabs + sortable + draggable

Сообщение e_vslv » 19 ноя 2010, 16:17

Спасибо большое) Разобралась)
e_vslv
 
Сообщений: 3
Зарегистрирован: 23 сен 2010, 10:21


Вернуться в jQuery UI

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1