[slavaspirit]

Всем доброго вечера!
Пробую делать простой Drag'n'drop интерфейс. Имеется несколько контейнеров (wrapper), в которых можно динамически создавать элементы (dragElement). Cами контейнеры, собственно, тоже динамические).
Мне нужно перетащить элемент из одного контейнера в другой. То есть, во время перетаскивания, необходимо определить, над каким контейнером сейчас элемент и туда его плюхнуть...
Затык в том, что я не могу определить контейнер через "onmouseover" и тому подобные вещи, поскольку курсор мыши во время перетаскивания всегда находится над элементом, а не над контейнером.
Собственно, чо делать-то?
Как-то может можно определить, над каким контейнером сейчас не курсор, а перетаскиваемый объект?

// Включаем Drag'n'Drop для элементов с классом draggable

	document.onmousedown = function(e) {

		var dragElement = e.target;

		if (!dragElement.classList.contains('draggable')) return;

		var coords, shiftX, shiftY, detectPage;

		startDrag(e.clientX, e.clientY);

		document.onmousemove = function(e) {
			moveAt(e.clientX, e.clientY);
		};

		// Здесь как-то надо определить и записать в переменную detectPage, над каким гнездом кукушки сейчас элемент

		dragElement.onmouseup = function() {
			finishDrag();
		};

		function startDrag(clientX, clientY) {

			shiftX = clientX - dragElement.getBoundingClientRect().left;
			shiftY = clientY - dragElement.getBoundingClientRect().top;

			dragElement.style.position = 'fixed';

			document.body.appendChild(dragElement);

			moveAt(clientX, clientY);

		};

		function finishDrag() {

			dragElement.style.top = parseInt(dragElement.style.top) - wrapper.getBoundingClientRect().top + 'px';
			dragElement.style.position = 'absolute';

			wrapper.onmouseup = function(e) {
				var selectPage = e.target;
			}

                        // Теперь взяв из переменной detectPage контейнер, плюхнем туда элемент

			detectPage.appendChild(dragElement);

			document.onmousemove = null;
			dragElement.onmouseup = null;

		};

		function moveAt(clientX, clientY) {
			var newX = clientX - shiftX;
			var newY = clientY - shiftY;

			if (newX < 0) newX = 0;
			if (newX > wrapper.offsetWidth - dragElement.offsetWidth) {
				newX = wrapper.offsetWidth - dragElement.offsetWidth;
			}

			dragElement.style.left = newX + 'px';
			dragElement.style.top = newY + 'px';
		};

		return false;
	};

	function selector(e) {
		var select = e.target;
		console.log(select);
	};