Комментарии к записи: Пользовательские интерфейсы jQuery: перемещаемый и «сбрасываемый» контент.

Автор: Ваня

Ваня — Thu, 06 Jan 2011 20:12:44 +0000

Пожалуйста, объясните почему так происходит!
Если добавить alert(«hello») в функцию удаления, то в IE после удаление элемента n количество раз будет выскакивать hello (тоесть функция будет еще несколько раз срабатывать), а остальных браузерах все ок(удалил – функция один раз выдала алерт). Почему так срабатывает! мне это необходимо для подсчета минимального кол-ва элементов в корзине.

Автор: Игорь

Игорь — Tue, 04 Aug 2009 06:19:59 +0000

Хорошо, спасибо за помощь!

Автор: Gennady

Gennady — Mon, 03 Aug 2009 17:57:20 +0000

Значит надо писать еще обработчик перемещения элементов внутри корзины….
Статья-то уж больно старая – Вы бы посмотрели современные примеры на
http://jqueryui.com/demos/droppable/

Автор: Игорь

Игорь — Mon, 03 Aug 2009 13:06:39 +0000

Здравствуйте.
Вопрос – а если мне нужно перемещать элементы ещё и внутри корзины, например менять их последовательность? Мне бы хотелось получить возможность не только добавлять перетаскиванием, но и иметь возможность перетащить из одной корзину в другую.

Автор: Serg

Serg — Tue, 17 Mar 2009 11:01:24 +0000

Простите встряну в обсуждение. Такой вопрос. А если фруктов в примере будет много и и они помещены в DIV с overflow: scroll? В FF все работет как надо, а в IE клон появляется совсем не в том месте, где ожидалось.
Кто нибудь с таким багом встречался?

Автор: DevNull

DevNull — Thu, 12 Mar 2009 13:50:39 +0000

В общем я сделал так. В тег input вставил атрибут id. И теперь извлекаю данные таким образом:
qnt = $(this).attr(‘id’);
alert(qnt);
Теперь все работает, за один исключением.
Добавляю в корзину 2 элемента. А сообщение выводится 8 раз. Если добавить 1 элемент, то сообщение будет выводиться 4 раза.
Как это можно исправить?

Автор: Gennady

Gennady — Fri, 06 Mar 2009 06:34:18 +0000

Я не знаю всей логики Вашего приложения, но если отталкиваться от того кода, что мы обсуждаем, можно воспользоваться методом add(), чтобы расширить тот набор элементов, который обрабатывается методом each(), но тогда внутри each(), нужно будет предусматривать дополнительную проверку - если элемент input, делаем что-то одно, если это img, делаем что-то другое. Примерно так:

$('div.basket')
    .find('input[@type=text]')
    .add('img.ext')
    .each(function(){
      if($(this).attr('value')){
        qnt = $(this).attr('value');
      } else {
        alert($(this).attr('alt'));
      } 
}

Только при добавлении add('img.ext') внимательно подойдите к написанию самого селектора, т.е. в каком контексте Вам надо будет отыскать все эти img.ext

Автор: DevNull

DevNull — Fri, 06 Mar 2009 05:52:09 +0000

Gennady, подскажите тогда, пожалуйста, как сделать так, чтобы перебирался не только первый элемент, а все поочередно. Я как только уже не пробовал, не получается.

Автор: Gennady

Gennady — Thu, 05 Mar 2009 13:17:50 +0000

Работает все верно. Давайте немного разберем Ваш код.
Надо понимать следующее – метод each() работает с набором элементов, предоставленным селектором. В Вашем случае – это все элементы input типа text, которые находятся внутри элементов div с классом basket.
this внутри each() ссылается на текущий элемент из набора, поэтому в qnt например, каждый раз перезаписывается значение из текущего элемента.
В следующей строке, Вы при каждой итерации снова и снова заставляете свой код выбирать все элементы img класса ext на странице и получать содержимое атрибута alt, но каждый раз только для первого элемента в наборе.
Надеюсь, что объяснил более-менее понятно. Если что-то осталось неясным – напишите.

Автор: DevNull

DevNull — Thu, 05 Mar 2009 05:51:11 +0000

Хорошо, приведу пример. Мне необходимо извлекать из тега значение атрибута alt.
Я интегрировал след. код:
var alt = $(«img.ext»).attr(«alt»);
alert(alt);
У первого элемента в корзине, alt равен слову Red. У второго элемента слово Orange. Но скрипт упрямо 4 (или больше) раза подряд выводит слово Red.
// *******************************
$(this).append(» » + name + «»);
}
// *******************************
$(«.delete»).click(function () {
$(this).parent().remove();
});
// *******************************
$(«#buy»).click(function () {
var databox = new Array();
$(«div.basket»).find(«input[@type=text]«).each(function(){
qnt = $(this).attr(«value»);
var id = $(«img.ext»).attr(«alt»);
alert(id);
…….
// *******************************