Sortable. Узнать на какое место элемент переместился.

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

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

Sortable. Узнать на какое место элемент переместился.

Сообщение lyapun » 03 фев 2011, 23:52

Здраствуйте!
Реализую с помощью виджета Sortable такую штуку: есть два списка, один заполнен определенными элементами - их пользователь должен перенести в другой список и расставить в определенном порядке. Чтобы была возможность сразу же поставить элемент, например, на 10-ое место, потом на 18-ое, потом на 1-ое, я заполнил второй список элементами представляющими из себя просто белые прямоугольники. При переносе элемента с первого списка я убираю последний пустой элемент из второго. Но это кривая реализация, и элементы таким образом постоянно смещаются на неправильные места.
Поэтому такой вопрос:
Можно ли узнать id элемента который изменил свое положение?

В документации есть некие event и ui принимаемые функцией:

Код: выделить все
$( ".selector" ).sortable({
   beforeStop: function(event, ui) { ... }
});

Но я сделав такое:

Код: выделить все
beforeStop: function(id,id2) {
    alert(id);
    alert(id2);
}

Получил всего лишь "object Object" :(

Или может по другому это лучше как-то реализовать?

Спасибо!
Последний раз редактировалось lyapun 04 фев 2011, 00:43, всего редактировалось 1 раз.
lyapun
 
Сообщений: 7
Зарегистрирован: 02 ноя 2010, 22:40

Re: Sortable. Узнать какой элемент переместился.

Сообщение Gennady » 04 фев 2011, 00:12

Код: выделить все
$( ".selector" ).sortable({
   beforeStop: function(event, ui) { ... }
});

здесь event - это объект события (если не знаете, что это такое - см. на javascript.ru).
ui - это специально подготовленный объект, с некоторыми полезными свойствами.
Для того, чтобы узнать что-то о перемещенном элементе надо обратиться к соответствующему свойству этого объекта. Например:
Код: выделить все
$( ".selector" ).sortable({
   beforeStop: function(event, ui) {
       alert(ui.item.attr("id")); // свойство item объекта ui представляет перемещаемый элемент
}
});

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

Re: Sortable. Узнать какой элемент переместился.

Сообщение zandroid » 04 фев 2011, 00:23

В таких случая пользуйтесь не alert(obj), а console.log(obj) - потом в консоли отладчика можно будет развернуть этот объект и увидеть какие у него есть свойства и что в них лежит.
Аватар пользователя
zandroid
Модератор
 
Сообщений: 1164
Зарегистрирован: 21 янв 2010, 22:16
Откуда: Нижний Новгород

Re: Sortable. Узнать какой элемент переместился.

Сообщение lyapun » 04 фев 2011, 00:41

Gennady писал(а):вот таким образом можно узнать значение атрибута id того элемента, который Вы перемещаете.


Спасибо большое за столь развернутый и оперативный ответ.

Но, я не правильно сформировал вопрос. Мне нужно узнать место которое он занял, то есть id элемента который раньше находился на позиции которую занял новый элемент из другого списка.
lyapun
 
Сообщений: 7
Зарегистрирован: 02 ноя 2010, 22:40

Re: Sortable. Узнать на какое место элемент переместился.

Сообщение Gennady » 04 фев 2011, 10:20

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

Re: Sortable. Узнать на какое место элемент переместился.

Сообщение lyapun » 04 фев 2011, 10:49

Gennady писал(а):Скажите, а что именно Вы пытаетесь реализовать? Может быть тут просто недостаточно одного функционала .sortable()? Это не что-то типа "угадайки", когда юзер будет тащить пункт одного списка в другой и если помещает в нужное место, то все ок, а если неправильно, то соответственно все не ок? :D


Нет, он расставляет объекты как хочет.

Есть два списка: один заполнен объектами, второй пустой. Задача - перетащить из первого списка все объекты во второй и расставить их по своему усмотрению. Но это надо сделать так, чтобы первый объект можно было поставить, например, сразу на 10-ое место, второй на 15-ое, третий на 4-ое, и т.к. далее заполнить весь список.
lyapun
 
Сообщений: 7
Зарегистрирован: 02 ноя 2010, 22:40

Re: Sortable. Узнать на какое место элемент переместился.

Сообщение Gennady » 04 фев 2011, 10:59

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

Re: Sortable. Узнать на какое место элемент переместился.

Сообщение smike » 17 фев 2014, 22:39

Прошу помочь.
У меня на sortable элементы на клик повешена функция. Допустим это ссылка и при клике на элемент осуществляется переход по ней. Нужно сделать так: если произошло перемещение sortable элемента(activate?) - отменить переход по ссылке. Собственно вопрос: как узнать произошло ли перемещение? Как мне реализовать это?
smike
 
Сообщений: 2
Зарегистрирован: 12 янв 2014, 12:42

Re: Sortable. Узнать на какое место элемент переместился.

Сообщение tuareg » 17 фев 2014, 23:56

Там есть куча событий. Так на вскидку. function update(e,ui) Ставим класс, что переместили('.sortableOk'). А в самом click() смотрим, есть ли класс. И если есть то просто удаляем класс и возвращаем e.preventDefault();
tuareg
Модератор
 
Сообщений: 359
Зарегистрирован: 24 ноя 2010, 00:44

Re: Sortable. Узнать на какое место элемент переместился.

Сообщение smike » 19 фев 2014, 21:58

tuareg писал(а):Там есть куча событий. Так на вскидку. function update(e,ui) Ставим класс, что переместили('.sortableOk'). А в самом click() смотрим, есть ли класс. И если есть то просто удаляем класс и возвращаем e.preventDefault();

Большое спасибо за ответ! Я не подумал о том, что событие click происходит, если нажать и отпустить кнопку. Думал, что если уже нажата кнопка, то событие произошло и нужно как-то отменять его последствия.
В итоге сделал как Вы сказали:
При сдвиге sortable элемента у него возникает событие activate. В этом событии я присваиваю всему списку класс active.
В свою очередь функция осуществляющая переход по клику проверяет есть ли у списка этот класс, если есть - удаляет его, если нет - осуществляет переход.

Еще раз огромное спасибо! Если будут вопросы по PHP - обращайтесь :)
smike
 
Сообщений: 2
Зарегистрирован: 12 янв 2014, 12:42


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

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

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