Перетащите div с динамической шириной ⇐ CSS

[Anonymous]

Требования
Я пытаюсь создать инструмент проектирования, похожий на Figma. Цель состоит в том, чтобы нарисовать блок, а затем перетащить его на родительский элемент div. Мне нужно использовать этот метод в ReactJs, но сейчас я пытаюсь использовать JS.
В настоящее время у меня есть родительский элемент div с фиксированной шириной. Теперь, когда я перемещаю дочерний элемент div, ширина и высота родительского элемента должны динамически увеличиваться. Пользователь может перетаскивать его без каких-либо ограничений. Если пользователь перетаскивает за пределы родительского div, он должен автоматически увеличивать ширину и перетаскивать div соответственно.
Текущее решение
Я создал скрипт для перетаскивания и удалить с помощью JS.
До сих пор, когда пользователь перетаскивал элемент div в правый конец родительского элемента div, я увеличивал ширину родительского блока и автоматически прокручивал его до правого конца.
Проблемы

• Неправильно прокручивается правый конец. Также перетаскивание происходит не плавно.
• Текущее решение работает, когда я перемещаю мышь, но мне нужно автоматически увеличивать ширину и поле перетаскивания, если пользователь перетаскивает за пределы родительского элемента div.

Код

Код: Выделить всё

function $(el){
return document.getElementById(el);
}
var isDragging = true;
let isOffsetLimit = false;
var tzdragg = function(){
return {
move : function(divid,xpos,ypos){
if(!isDragging) return false;
// Stop drag if user release mouse key
window.addEventListener('mouseup', function(event){
// console.log('window mouseup');
// do logic here
isDragging = false;
isOffsetLimit = false;
})

var a = $(divid);
$(divid).style.left = xpos + 'px';
$(divid).style.top = ypos + 'px';
var elemParent = document.getElementById('parent');

let evt = window.event;
if(!evt) return;
var posX = evt.clientX,
posY = evt.clientY,
a = $('elem'),
divTop = a.style.top,
divLeft = a.style.left;

divTop = divTop.replace('px','');
divLeft = divLeft.replace('px','');
var diffX = posX - divLeft,
diffY = posY - divTop;
var posX = evt.clientX,
posY = evt.clientY,
aX = posX - diffX,
aY = posY - diffY;
var boun=document.getElementById("parent").offsetWidth;

// If user drag to right end of parent div then increase div and drag div
if((aX>0)&&(aX>=boun-100)){
// console.log(aX, aY, boun, isOffsetLimit);
setTimeout(function(){
if(isOffsetLimit){
var elemParent = document.getElementById('parent');
const offsetWidth = elemParent.offsetWidth;
elemParent.style.width = offsetWidth + 10 + "px";
scrollRight(60);
tzdragg.move('elem',boun,aY);
// console.log('auto move', isDragging);
}else{
var elemParent = document.getElementById('parent');
const offsetWidth = elemParent.offsetWidth;
elemParent.style.width = offsetWidth + 10 + "px";
scrollRight(60);
tzdragg.move('elem',boun,aY);
}
},10)
// console.log('pos', document.getElementById("parent").offsetWidth - document.getElementById("elem").offsetWidth )
}
},
setDragging : function() {
// console.log('set drag', isDragging);
// isDragging = true;
},
resetDragging : function() {
// console.log('reset drag', isDragging);
if(isDragging){
// isDragging = false;
}
},
startMoving :  function(evt){
// console.log('start drag', isDragging, isOffsetLimit);
// if(!isDragging) return false;
isDragging = true;
evt = evt || window.event;
var posX = evt.clientX,
posY = evt.clientY,
a = $('elem'),
divTop = a.style.top,
divLeft = a.style.left;

divTop = divTop.replace('px','');
divLeft = divLeft.replace('px','');
var diffX = posX - divLeft,
diffY = posY - divTop;
document.onmousemove = function(evt){
// isOffsetLimit = false;
if(!isDragging) return false;
evt = evt || window.event;
// console.log('mouse move', isDragging);
var posX = evt.clientX,
posY = evt.clientY,
aX = posX - diffX,
aY = posY - diffY;
var boun=document.getElementById("parent").offsetWidth;

if((aX>0)&&(aX0)&&(aY0)&&(aX0)&&(aY




Подробнее здесь: [url]https://stackoverflow.com/questions/77358213/drag-div-with-dynamic-width[/url]