Как сделать так, чтобы нельзя было накладывать один элемент на другой?
Я создаю два квадрата, затем начинаю их перетаскивать, и когда я один перетаскиваемый квадрат в процессе подношу ко второму квадрату и отпускаю, должно произойти так, чтобы элемент не смог наложиться поверх другого, а, к примеру, вернулся в свое исходное положение или разместился рядом с тем элементом, на который не смог "лечь".
Вам необходимо хранить все перетаскиваемые объекты в массиве. На событии отпускания (mouseup) проверяете, пересекается ли ваш перетаскиваемый квадрат с другими. Это можно сделать, например, так:
var rectangles = [ document.querySelector("#rect1") /*, ...*/];
var activeRect, activeRectCoords; // перетаскиваемый прямоугольник
var isIntersects = function(it){
var coords = it.getBoundingClientRect();
// находится ли перетаскиваемый прямоугольник
// между верхней и нижней границей перескиваемого
if (activeRectCoords.top > coords.top &&
activeRectCoords.top < coords.top + coords.height) {
return true;
}
return false;
}
if (rectangles.some(isIntersects)) {
// возвращаете старые координаты, например
}