所以這是一個有點(diǎn)奇怪的問題。用可調(diào)整大小的div編寫web應(yīng)用程序。我現(xiàn)在使用CSS resize屬性，因?yàn)樗雌饋硎亲詈唵蔚姆椒ā栴}是我的盒子有一個鎖定的底部和左側(cè)位置(我想保持這一點(diǎn))，但是默認(rèn)選擇的調(diào)整大小角是右下角，這在調(diào)整頂部大小時(shí)會產(chǎn)生奇怪的結(jié)果。我在網(wǎng)上看了看，但是找不到一種方法把那個角移到右上角而不是右下角。對如何產(chǎn)生這個結(jié)果有什么建議嗎？也不反對使用不同的調(diào)整大小的方法。下面是應(yīng)用于該框的當(dāng)前樣式:
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的圖片，它的角上有調(diào)整大小工具。任何建議都將不勝感激。我也很樂意詳述我可能錯過的事情。謝謝！
這是一個起點(diǎn)。我實(shí)際上是在右上角創(chuàng)建了一個自定義的調(diào)整大小圖標(biāo)。然后，我使用“mousedown”、“mousemove”和“mouseup”事件來跟蹤調(diào)整活動。你也許可以使用“拖動”和相關(guān)事件來做類似的事情。
請注意,“mousedown”在調(diào)整大小圖標(biāo)上，而“mousemove”和“mouseup”在文檔正文上(或可調(diào)整大小的div后面的其他更大的元素)。
為了簡單起見，我在JavaScript中硬編碼了寬度和高度。這意味著這些值存在于兩個不同的地方，這是不好的。你可能應(yīng)該只把它們放在JavaScript或CSS中，而不是像我這樣兩者都放。
我需要將可調(diào)整大小的div放入填充主體的容器中。否則，不注冊可調(diào)整大小的div之外的“mousemove”事件。如果在絕對定位的可調(diào)整大小的元素“后面”已經(jīng)有了其他內(nèi)容，這可能不是問題。
供您參考:我最初也嘗試使用原生的調(diào)整大小功能。我使用transform:rotate(-90度)將resize角移動到右上角，然后使用transform:rotate(90度)放入一個內(nèi)部div，使內(nèi)部內(nèi)容再次正確向上。然而，雖然這將調(diào)整大小的角放在了正確的位置，但調(diào)整大小本身卻完全混亂了，因?yàn)槭髽?biāo)移動和實(shí)際調(diào)整大小本身相差了90度。這有點(diǎn)難以用語言來描述，但可以說，沒有一些重大的重新工作(或者一些輝煌的代碼或隱藏的功能)，我無法讓這個策略工作。
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>另一個骯臟的方法是:將容器的方向設(shè)置為rtl，拐角將在左邊
.resizable {
resize: both;
overflow: auto;
direction: rtl
}請記住，您需要在內(nèi)部div中將方向設(shè)置回ltr，這樣文本就會像您所期望的那樣顯示:
.content {
direction: ltr
}這是給你的建議:
.outer-ne-resize {
resize: both;
overflow: auto;
}
.inner-ne-resize,
.outer-ne-resize {
transform: rotateX(180deg);
height: 100%;
width: 100%;
}
.content {
height: 100%;
background-color: lightgray;
}<div class="outer-ne-resize">
<div class="inner-ne-resize">
<div class="content">
<p>Lorem ipsum content Lorem ipsum content Lorem ipsum content.<br>
Lorem ipsum content Lorem ipsum content Lorem ipsum content.
</p>
</div>
</div>只是一個從Andrew Willems到JS類的重構(gòu)解決方案，也可以保持你的全局范圍干凈，并且能夠應(yīng)用到幾個div
如果您從Stack Overflow中運(yùn)行這個代碼片段，您需要通過單擊& quot整頁& quot點(diǎn)擊& quot運(yùn)行代碼段& quot。
class Resizehandler {
constructor(targetDivID, pullTabID) {
var d = document;
var pullTab = d.getElementById(pullTabID);
this.target = d.querySelector(targetDivID);
this.ht = 400; this.wd = 400;
this.x = 0; this.y = 0;
this.dx = 0; this.dy = 0;
var resizeFn = this.resize.bind(this);
pullTab.addEventListener("mousedown", (evt) => {
this.x = evt.screenX;
this.y = evt.screenY;
d.body.addEventListener("mousemove", resizeFn);
d.body.addEventListener("mouseup", () => {
d.body.removeEventListener("mousemove", resizeFn);
});
});
}
resize(evt) {
this.dx = evt.screenX - this.x;
this.dy = evt.screenY - this.y;
this.x = evt.screenX;
this.y = evt.screenY;
this.wd += this.dx;
this.ht -= this.dy;
this.target.style.width = this.wd + "px";
this.target.style.height = this.ht + "px";
};
}
new Resizehandler("#resizable", "rsz");#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>幾年后，仍然在尋找這樣做的方法。
我現(xiàn)在找到了一種方法，可以用左上角的resize anchor來調(diào)整位于右下角的元素的大小。
在chrome中，它似乎像預(yù)期的那樣工作，但它依賴于遠(yuǎn)未在任何標(biāo)準(zhǔn)中定義的行為，因此在任何生產(chǎn)環(huán)境中，最好不要依賴于它，除非您可以控制哪些客戶端/瀏覽器使用該代碼。
完整示例及解釋見此處: https://jsfiddle.net/ElMoonLite/zvok7p1f/
核心代碼:
<div class="bottomright-with-nw-resize-outer">
<div class="bottomright-with-nw-resize-inner">
Lorem ipsum content Lorem ipsum content Lorem ipsum content.<br>
Lorem ipsum content Lorem ipsum content Lorem ipsum content.
</div>
</div>.bottomright-with-nw-resize-outer {
transform: rotateZ(180deg);
resize: both;
overflow: auto;
padding: 0 8px 8px 0;
position: fixed;
bottom: 10px;
right: 10px;
height: 100px;
width: 100px;
}
.bottomright-with-nw-resize-inner {
transform: rotateZ(180deg);
width: 100%;
height: 100%;
overflow: auto;
}這是一個內(nèi)嵌版本，它的工作方式就像我期望的右拖動錨點(diǎn)一樣。 注意，它有兩個手柄，一個在我想要的右上角，另一個在底部，用于垂直軸。
關(guān)于垂直滾動的說明
。垂直滾動{//也可以用作多個x-flip和x-flipback元素的換行 最小高度:20px//這可以防止與底片重疊 調(diào)整大小:垂直； 溢出:自動；//如果沒有設(shè)置高度屬性，則在用戶輸入之前這是未定義的 }
作為代碼片段的替代，我在元素外部使用了垂直滾動類。也許如果有多個子flip和flip back元素，在底部對齊一個垂直滾動點(diǎn)會更好看。
或者甚至去掉垂直滾動類。
.resize-x-handle-flip {
transform: rotateX(180deg);
resize: horizontal;
overflow: auto;
width: 200px;
background:lightcyan;
}
.x-text-flip-back {
transform: rotateX(180deg);
}
.vertical-scroll {
min-height:20px;
resize:vertical;
overflow:auto;
}<div class="resize-x-handle-flip">
<div class="x-text-flip-back">
<div class="vertical-scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.<br> dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</div>
</div>
</div>下面的解決方案使用了“移動對象”技術(shù)，但是保留了右下角的位置。左上角的標(biāo)準(zhǔn)html箭頭接受光標(biāo)向下，現(xiàn)在您可以“拖動”框，而左下角保持不動，有效地從左上角重新調(diào)整框的大小。 這段代碼獨(dú)立運(yùn)行:
<html>
<head>
<script>
document.onmousedown=myMouseDown;
document.onmouseup=myMouseUp;
var can_drag=false;
var moving;
function obj_move(e) {
if (can_drag) {
moving.style.left =(e.clientX)+'px';
moving.style.top =(e.clientY)+'px';
return true;
}
}
function myMouseUp(e) {
can_drag=false;
}
function myMouseDown(e) {
var selected_item=event.srcElement;
if(selected_item.className=="drag") {
moving=document.getElementById('test');
can_drag=true;
document.onmousemove=obj_move;
}
return true;
}
</script>
</head>
<body>
<div style='position:absolute;top:50px; left:200px;right:600px;bottom:300px; border:1px solid black;overflow:scroll' id='test'>
<span class='drag' style='cursor:pointer'>⇱</span>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel velit blandit, convallis est vel, feugiat
lorem. Suspendisse aliquam turpis eu posuere fermentum. Proin ullamcorper, purus vitae pulvinar congue,
odio augue cursus diam, et semper mauris eros et odio. Nam vestibulum est scelerisque, accumsan ligula sed,
pulvinar justo. Duis scelerisque ligula eget facilisis molestie. Suspendisse et consequat nunc, at ultrices risus.
Duis varius nisl in nibh convallis fermentum. Mauris posuere neque placerat posuere ultrices.
Suspendisse eget massa ligula. Vestibulum quis elit justo. Maecenas sed augue fringilla, luctus leo eget,
tincidunt dui. Aliquam ligula enim, condimentum vitae vestibulum vitae, rutrum sed turpis. Vivamus vitae nibh erat.
Duis laoreet quis turpis eu eleifend. Suspendisse nec ultrices augue, vel suscipit sem.
<br>
</div>