При нажатии на "+" создается новый элемент. Его можно перемещать между блоками. Если его отпустить на каком-то элементе, он вставится после него. Нужно сделать так, чтобы при дропе на какой-то элемент, если перетаскиваемый элемент смещен правее, относительно элемента на который он дропается, он дропался справа, а если смещен левее, дропался левее. Как это реализовать? У меня есть вариант взять координаты центра объекта на который дропаем как X = 0, Y = 0, и если позиция дропаемого элемента относительно Y будет > 0 то дропать справа, если < 0 , то дропать слева. Но как реализовать на языке JS я пока не понимаю. Можно ли так реализовать решение или есть другие варианты?
let counter = 0;
let currentDrag;
document.addEventListener('click', e => {
if (e.target.classList.contains('new-item')) {
const newItem = createItem();
const zone = getCurrentZone(e.target);
zone.insertBefore(newItem, zone.lastElementChild)
}
});
document.addEventListener('dragstart', (e) => {
const zone = getCurrentZone(e.target);
if (zone) {
currentDrag = { startZone: zone, node: e.target };
e.dataTransfer.setData('text/html', 'dragstart');
}
});
document.addEventListener('dragover', (e) => {
const zone = getCurrentZone(e.target);
if (zone) {
e.preventDefault();
}
});
document.addEventListener('drop', (e) => {
e.preventDefault();
const zone = getCurrentZone(e.target);
if (currentDrag) {
if (zone && currentDrag.startZone !== zone) {
if (e.target.classList.contains('item')) {
zone.insertBefore(currentDrag.node, e.target.nextElementSibling);
} else {
zone.insertBefore(currentDrag.node, zone.lastElementChild);
}
}
if (zone && currentDrag.startZone === zone) {
if (e.target.classList.contains('item')) {
zone.insertBefore(currentDrag.node, e.target.nextElementSibling);
} else {
zone.insertBefore(currentDrag.node, zone.lastElementChild);
}
}
currentDrag = null;
} else {
const dt = e.dataTransfer;
if (dt.files && dt.files.length) {
for (const file of dt.files) {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.addEventListener('load', () => {
const item = createItem(reader.result);
zone.insertBefore(item, zone.lastElementChild);
});
}
}
}
});
function createItem(background) {
const newDiv = document.createElement('div');
counter++;
if (background) {
newDiv.style.background = `url(${background})`;
newDiv.style.backgroundSize = `cover`;
} else {
newDiv.textContent = counter;
}
newDiv.classList.add('item');
newDiv.draggable = true;
return newDiv;
}
function getCurrentZone(from) {
// return from.parentNode;
// return from.closest('.drop-zone');
do {
if (from.classList.contains('drop-zone')) {
return from;
}
} while (from = from.parentElement);
return null;
}
.container {
display: flex;
padding: 30px;
height: 500px;
}
.drop-zone {
display: flex;
flex-basis: 50%;
flex-wrap: wrap;
align-content: start;
padding: 15px;
border: 3px dashed #b3b3b3;
border-radius: 10px;
}
.item, .new-item {
margin: 0 10px 10px 0;
display: flex;
justify-content: center;
align-items: center;
color: hsla(0, 0%, 40%, 1);
}
.item, .new-item {
border: 2px dashed #783db3;
border-radius: 10px;
width: 50px;
height: 50px;
cursor: move;
user-select: none;
}
.new-item {
cursor: pointer;
border: 2px dashed #b3b3b3;
font-size: 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container text-center">
<div class="container">
<div class="drop-zone">
<div class="new-item">+</div>
</div>
<div class="drop-zone">
<div class="new-item">+</div>
</div>
<div class="drop-zone">
<div class="new-item">+</div>
</div>
<div class="drop-zone">
<div class="new-item">+</div>
</div>
</div>