определить элемент под перетаскиваемым элементом
Всем доброго вечера!
Пробую делать простой 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); }; |
вот тут глянь https://draganddrop.herokuapp.com/
|
Цитата:
|
Нашел, в общем, в архивах лекций с курсов Ильи, где он рассказывал об этом. Может кому пригодится. Хотя не знаю, нормальное это решение или нет.
На mouseup над контейнером делаем перетаскиваемому объекту display:none, после чего спокойно получаем координаты места под курсором через elementFromPoint, определяем, что там за контейнер и возвращаем объекту display:block. |
Часовой пояс GMT +3, время: 12:38. |