Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.07.2015, 20:20
Интересующийся
Отправить личное сообщение для slavaspirit Посмотреть профиль Найти все сообщения от slavaspirit
 
Регистрация: 22.06.2013
Сообщений: 14

определить элемент под перетаскиваемым элементом
Всем доброго вечера!
Пробую делать простой 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);
	};
Ответить с цитированием
  #2 (permalink)  
Старый 25.07.2015, 21:36
Интересующийся
Отправить личное сообщение для jenia0jenia Посмотреть профиль Найти все сообщения от jenia0jenia
 
Регистрация: 24.07.2015
Сообщений: 13

вот тут глянь https://draganddrop.herokuapp.com/
Ответить с цитированием
  #3 (permalink)  
Старый 25.07.2015, 21:48
Интересующийся
Отправить личное сообщение для slavaspirit Посмотреть профиль Найти все сообщения от slavaspirit
 
Регистрация: 22.06.2013
Сообщений: 14

Сообщение от jenia0jenia Посмотреть сообщение
вот тут глянь https://draganddrop.herokuapp.com/
Спасибо, но это jQuery... Мне бы без него...
Ответить с цитированием
  #4 (permalink)  
Старый 26.07.2015, 02:49
Интересующийся
Отправить личное сообщение для slavaspirit Посмотреть профиль Найти все сообщения от slavaspirit
 
Регистрация: 22.06.2013
Сообщений: 14

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Можно ли узнать какой элемент находится под данным? nbq Javascript под браузер 2 14.03.2015 20:58
Как определить первый элемент в списке? veltony Элементы интерфейса 2 15.02.2015 15:07
Как определить, когда дочерний элемент обрезается overflow: hidden? Sprinter Элементы интерфейса 2 10.05.2012 10:41
определить элемент на котором щелчок warobushek Events/DOM/Window 3 13.06.2010 12:04
Найти элемент под курсором Гость Элементы интерфейса 16 11.12.2009 14:08