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