Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   определить элемент под перетаскиваемым элементом (https://javascript.ru/forum/dom-window/57231-opredelit-ehlement-pod-peretaskivaemym-ehlementom.html)

slavaspirit 25.07.2015 19:20

определить элемент под перетаскиваемым элементом
 
Всем доброго вечера!
Пробую делать простой 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);
	};

jenia0jenia 25.07.2015 20:36

вот тут глянь https://draganddrop.herokuapp.com/

slavaspirit 25.07.2015 20:48

Цитата:

Сообщение от jenia0jenia (Сообщение 381502)
вот тут глянь https://draganddrop.herokuapp.com/

Спасибо, но это jQuery... Мне бы без него...

slavaspirit 26.07.2015 01:49

Нашел, в общем, в архивах лекций с курсов Ильи, где он рассказывал об этом. Может кому пригодится. Хотя не знаю, нормальное это решение или нет.

На mouseup над контейнером делаем перетаскиваемому объекту display:none, после чего спокойно получаем координаты места под курсором через elementFromPoint, определяем, что там за контейнер и возвращаем объекту display:block.


Часовой пояс GMT +3, время: 19:51.