Question

这个问题很简单，我有一个div，里面还有其他节点，我想创建一个函数来在鼠标拖动时调整div及其子元素（特别是画布）的大小。通用或至少是半通用的。当我尝试调整子节点的宽度和高度并引发错误时，问题就出现了。

我试图获取width和height属性并将它们作为对象添加到数组中并通过它们，但是canvas width似乎会产生一串px字符，我不知道从那里开始（是的，我抬头该问题）。

 // this is a shortened version of what really happens for simplification 

 var Map = {dragUnlocked:false,resizeUnlocked:false,div:document.createElement("div")};
Map.div.appendChild(document.createElement("canvas"))
 guiResizeDiv(Map,Map.div)

// YOU CAN BASICALLY IGNORE THIS BIT BECAUSE IT HAS MORE TO DO WITH 
//FUNCTIONALITY
 function guiResizeDiv(objectNeeded,div){
div.addEventListener('mousedown', initDrag, false);
let startX, startY, startWidth, startHeight;
function initDrag(e) {
    if(objectNeeded.resizeUnlocked=== true){}else return;
    startX = e.clientX;
    startY = e.clientY;
    startWidth = parseInt(document.defaultView.getComputedStyle(div).width, 10);
    startHeight = parseInt(document.defaultView.getComputedStyle(div).height, 10);
    document.documentElement.addEventListener('mousemove', doDrag, false);
    document.documentElement.addEventListener('mouseup', stopDrag, false);
}

 //END OF IGNORED SAGMENT





 //THIS IS WHERE THE ISSUE IS
    function doDrag(e) {
 //MAKE DIV ADJUST
    div.style.width = (startWidth + e.clientX - startX) + 'px';
    div.style.height = (startHeight + e.clientY - startY) + 'px';

  //MAKE CHILDNODE ADJUST (DOES NOT WORK)
   /* for(let i = 0;i<=div.childNodes.length;i++){
        let childNode = div.childNodes[i];
        childNode.style.width+= (e.clientX - startX) + 'px';
        childNode.style.height+= (e.clientY - startY) + 'px';
    }*/

}

function stopDrag(e) {
    document.documentElement.removeEventListener('mousemove', doDrag, false);
    document.documentElement.removeEventListener('mouseup', stopDrag, false);
}
}

如果您想知道resizeUnlocked如何等于true，我将使用附加到div的按钮来锁定和解锁此功能。

如何使用父级动态调整div中的childNodes大小

0 个答案: