Вопрос по drag&drop
 

Здравствуйте! Передо мной встала следующая задача:
Несколько элементов, являющиеся draggable, (что-то типа менюшки с выбором компонент) должны переноситься на поле, каждый элемент которого - droppable. После того, как эти элементы перенесены на поле, там они должны уметь передвигаться между ячейками.
Я это реализовала следующим способом: в менюшке у меня элементы со значением helper = clone, затем, ели такой элемент перенесли в поле, я его клонирую, склонированный объект делаю уже original, ну и передвигаю его уже по полю.
Проблема состоит в следующем: я использую append для того, чтобы drop эл-т запоминал draggable элемент. Затем, если я попередвигала уже склонированный элемент по полю, а затем пытаюсь новый элемент поставить на старое место старого, то, либо ячейка поля растягивается, т.к. помнит, что там был тот элемент, либо, если использовать empty(), старый элемент исчезает вовсе.
Т.о., у меня возник вопрос: есть ли еще какие-либо аналоги append() или empty(), которые позволят реализовать задуманное, или стандартными средствами jQuery не обойтись, и нужно использовать какие-либо обходные пути?

на всякий случай привожу код:

$("td.drop").droppable({
		drop: function(event, ui) {
			var pos = ui.helper.offset();
			pos.left -= tleft;
			pos.top -= ttop;
			if (pos.top < 0)
				pos.top = 0;
			if (pos.left < 0)
				pos.left = 0;
			pos.top -= pos.top % tdh;
			pos.left -= pos.left % tdw;
			var i = pos.top / tdh;
			var j = pos.left / tdw;
			if (ui.helper.name == "div.drag1" || ui.helper.name == "div.drag2" 
			|| ui.helper.name == "div.drag3")
			{		
				var element = ui.draggable.clone();
				$(this).empty();
				$(this).append(element);
				element.id = drag_cnt++;
				drops[i][j] = element.id;
				drops1[i][j] = this;
				dragg[element.id] = i * 10 + j;
				dragg1[element.id] = this;
				$(this).droppable("disable");
				element.draggable({
					helper: 'original',
					start: function(event, ui) {
						ui.helper.name = element.id;
					},
					drag: function(event, ui) { 
						var pos = ui.helper.offset();
						if (pos.top >= ttop && pos.left >= tleft && pos.left <= tleft + 2 * tdw)
							$(this).draggable( "option", "grid", [tdh, tdw] );
						else
							$(this).draggable( "option", "grid", [1, 1] );
					},
					stop: function (event, ui){
						var pos = ui.helper.offset();
						var t_j = dragg[element.id] % 10;
						var t_i = (dragg[element.id] - t_j) / 10;
						if (pos.left >= tleft + 2 * tdw)
						{
							$(dragg1[element.id]).droppable("enable");
							drops[t_i][t_j] = undefined;
							$(this).css("width", "0px");
							$(this).dragable( "destroy" );
						}
						pos.left -= tleft;
						pos.top -= ttop;
						if (pos.top < 0)
							pos.top = 0;
						if (pos.left < 0)
							pos.left = 0;
						pos.top -= pos.top % tdh;
						pos.left -= pos.left % tdw;
						var ii = pos.top / tdh;
						var jj = pos.left / tdw;
						if (drops[ii][jj] != undefined)
						{
							$(dragg1[element.id]).droppable("enable");
							drops[t_i][t_j] = undefined;
							$(this).css("width", "0px");
							$(this).dragable( "destroy" );
							return;
						}
						if (ii != t_i || jj != t_j)
						{
							dragg[element.id] = i * 10 + j;
							drops[t_i][t_j] = undefined;
							drops[ii][jj] = element.id;
						}
					}
				});
			$(this).droppable("disable");
			}
			else
			{
				var t_jj = dragg[ui.helper.name] % 10;
				var t_ii = (dragg[ui.helper.name] - t_jj) / 10;
				$(dragg1[ui.helper.name]).droppable("enable");
				drops[t_ii][t_jj] = undefined;
				drops1[i][j] = this;
				dragg1[ui.helper.name] = this;								
				$(this).empty();
				$(this).append(ui.draggable.helper);
				$(this).droppable("disable");
			}
		}
	});