jquery clone, экспоненциальное <div>создание

Question

В настоящее время я создаю приложение, в котором пользователь может перетаскивать элементы в почтовый ящик.

После того как они уронили элемент, новое изображение создается «позади» почтового ящика, создавая ощущение, что оно действительно падает.

Я использую следующий код для создания и анимации новых изображений каждый раз, когда человек бросает предмет:

function animateDrop(){
animateArray.push($('.animateDrop').clone())
xArray.push(xPos)
yArray.push(yPos)

var foo = animateArray[animateArray.length - 1];
var finalxPos = xArray[xArray.length - 1];
var finalyPos = yArray[yArray.length - 1];

$('body').append(foo);
foo.css({'left': finalxPos, 'top': finalyPos + 40}).fadeIn('slow');
foo.animate({'top': '+=100px'},1500);
};
animateDrop();

Когда код выполняется, создается новое изображение, но падение большего количества элементов вызывает экспоненциальный рост создаваемых элементов div.

Где-то это запоминание всех ранее созданных элементов div и добавление их всех снова в тело (по крайней мере, это то, что выглядит для меня).

В настоящее время я застрял на пути предотвращения этого, любая помощь будет признательна.

ОБНОВЛЕНИЕ 24-10-2011: animateArray.push ($ ('. AnimateDrop'). First (). Clone ()) Добавление .first () к push-массиву решило проблему создания нескольких элементов div.

Answer 1

Ваше предположение верно. Вы копируете оригинал и все уже скопированные элементы снова. Используйте другой идентификатор класса вместо $ (". AnimateDrop") или удалите этот класс из тех случаев, когда вы больше не хотите копировать

Возможно, есть более подходящий подход к вашей проблеме - вы можете использовать функцию обратного вызова в drag / droppables Взгляните сюда: http://jqueryui.com/demos/draggable/

Answer 2

Просто используйте селектор jQuery first() or :first перед вызовом клонирования.Это должно сработать.