有沒有辦法改變CSS調整大小角落的位置？

Question

所以這是一個奇怪的問題。使用可調整大小的div編寫Web應用程序。我現在使用CSS resize屬性，因爲它似乎是最簡單的方法。問題是我的盒子有一個鎖定的底部和左側位置（我想要維護），但默認選擇的調整大小角落是右下角，這會產生調整頂部大小的奇怪結果。在網上瀏覽，但無法找到一種方法將該角落移到右上角，而不是右下角。有關如何產生這一結果的任何建議？也不反對使用不同的調整方法。這裏是被貼在箱子上當前風格：

display: block; 
font-size: 9pt; 
position: absolute; 
bottom: 50px; 
left: 20px; 
padding: 10px; 
min-height: 0; 
min-width: 0; 
border: solid 1px black; 
width:400px; 
height:400px; 
resize: both; 
overflow-x: auto; 
overflow-y: hidden; 

而這裏的div的問題與當前具有調整大小工具就可以了盒裝的一角的照片。任何建議將不勝感激。我很樂意詳細說明我可能錯過的事情。謝謝！

Box I want to resize in question

Answer 1

這裏的一個出發點。我基本上在右上角創建了一個自定義大小調整圖標。然後，我使用'mousedown'，'mousemove'和'mouseup'事件來跟蹤調整大小活動。您可以使用「拖曳」和相關事件來做類似的事情。

請注意'mousedown'位於縮放圖標上，而'mousemove'和'mouseup'位於文檔正文（或可調整大小的div後的其他較大元素）上。

爲了簡單起見，我在JavaScript中對寬度和高度進行了硬編碼。這意味着這些價值存在於兩個不同的地方，這是不好的。你應該只把它們放在JavaScript中，或者只放在CSS中，而不是像我一樣。

我需要將可調整大小的div放入充滿人體的容器中。否則，可調整div以外的'mousemove'事件未被註冊。如果您已將其他內容「隱藏」在絕對定位的可調整大小的元素後面，則這可能不是問題。

對於您的信息：我最初也嘗試使用本機調整大小功能。我使用transform: rotate(-90deg)將調整大小的角落移動到右上角，然後放入一個內部div與transform: rotate(90deg)以使內部內容再次右移。但是，雖然這將調整大小的角落放在正確的位置，但調整大小本身已經完全搞砸了，因爲鼠標移動和實際調整大小本身已經偏離了90度。用文字描述有點難，但可以這麼說，沒有一些重大的工作（或者可能是一些精彩的代碼或隱藏的功能），我無法讓這個策略起作用。

var 
 
    doc = document, 
 
    ht = 400, 
 
    wd = 400, 
 
    main = document.querySelector("#resizable"), 
 
    x, y, dx, dy; 
 

 
var startResize = function(evt) { 
 
    x = evt.screenX; 
 
    y = evt.screenY; 
 
}; 
 

 
var resize = function(evt) { 
 
    dx = evt.screenX - x; 
 
    dy = evt.screenY - y; 
 
    x = evt.screenX; 
 
    y = evt.screenY; 
 
    wd += dx; 
 
    ht -= dy; 
 
    main.style.width = wd + "px"; 
 
    main.style.height = ht + "px"; 
 
}; 
 

 
rsz.addEventListener("mousedown", function(evt) { 
 
    startResize(evt); 
 
    doc.body.addEventListener("mousemove", resize); 
 
    doc.body.addEventListener("mouseup", function() { 
 
    doc.body.removeEventListener("mousemove", resize); 
 
    }); 
 
});

#container { 
 
    position: absolute; 
 
    border: solid red 1px; 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#resizable { 
 
    display: block; 
 
    font-size: 9pt; 
 
    position: absolute; 
 
    bottom: 50px; 
 
    left: 20px; 
 
    padding: 10px; 
 
    min-height: 0; 
 
    min-width: 0; 
 
    border: solid 1px black; 
 
    width: 400px; 
 
    height: 400px; 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
} 
 
#rsz { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: rgba(255, 0, 0, 0.5); 
 
} 
 
#original {}

<div id="container"> 
 
    <div id="resizable"> 
 
    <div id="rsz"></div> 
 
    (some content) 
 
    </div> 
 
</div>

如果運行堆棧溢出內此代碼段，您需要通過單擊「全頁面」點擊「運行代碼片段」後，擴大運行視圖區域。