function startDrag(e, el) {
if (this.isResizing || this.isRotating) return;
e.preventDefault();
this.isDragging = true;
let rect = el.getBoundingClientRect();
// Смещение курсора относительно центра элемента
let mouseOffsetX = e.clientX-parseFloat(el.style.left);
let mouseOffsetY = e.clientY-parseFloat(el.style.top);
let onMouseMove = (e) => {
if (!this.isDragging) return;
// Устанавливаем новые координаты
el.style.left = (e.clientX-mouseOffsetX) + 'px';
el.style.top = (e.clientY - mouseOffsetY ) + 'px';
};
let onMouseUp = () => {
this.isDragging = false;
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
};
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
}function nearest(el, sel) {
while (el && !(el.matches(el,sel))) {el = el.parentElement};
return el;
}
... .addEventListener("click", function (e) {
let block=nearest(e.target,'.toggle'),
content_1=block.querySelector('.toggle-content[data-id="1"]'),
...
})
var disp=[0,0]; // смещение
var listener = function (e) {
full_info_div.style.left = (disp[0]+e.clientX) + "px";
full_info_div.style.top = (disp[1]+e.clientY) + "px";
};
full_info_div.addEventListener('mousedown', e => {
let b = full_info_div.getBoundingClientRect();
disp= [b.left-e.clientX,b.top-e.clientY];
document.addEventListener('mousemove', listener);
document.querySelector("html").setAttribute("style", "user-select: none");
});
...
Вроде почти что надо. Вот только второй столбик тоже перестраивается и, вероятно, будут забавно смотреться раскрытые-закрытые комменты в нижних ответах...
P.S. Впрочем это лечится вот таким правилом