用戶使用行大小的光標更改div的大小 - 比如codepen.io

Question

我有點問題。

如果你曾經使用codepen.io，你可以看到，用戶可以動態地使用他們的光標，使腳本大/小，如下面的屏幕截圖更改腳本的大小說明：

你可以從圖形看，用戶能夠操縱腳本大小到他們的個人規範。這是如何完成的？有沒有我可以使用的插件？

我已經研究了一段時間（在對Stack Overflow提出問題之前應該總是這樣做），而我似乎無法找到答案！

我會在這個問題中包含一段代碼，它只是我不知道從哪裏開始。

感謝先進！

PS。我希望用戶能夠從左到右和從上到下控制腳本的寬度，所以基本上用戶可以在任何方向上控制大小。

Answer 1

有100萬和一個方法可以做到這一點，我建議你只使用像Dojo or something現有的框架...

但是，如果你絕對必須有自定義代碼，它的一般要點是建立一個具有相對定位的容器，然後創建根據父容器絕對定位的嵌入容器。 （原諒例如內嵌樣式）

<div class="SplitContainer" style="position:relative"> 
    <div class="ContentPane" style="position:absolute"> 
     Some Text 
    </div> 
    <div class="Divider" style="position:absolute"></div> 
    <div class="ContentPane" style="position:absolute"> 
     Other Text 
    </div> 
</div> 

使用鼠標事件（鼠標按下，鼠標鬆開，鼠標移動），當用戶點擊了分頻器來檢測。您可以使用這些事件中的信息來確定鼠標位置（evt.pageX，evt.pageY）。

然後做很多數學來確定絕對定位的容器的左側，右側，頂部，底部。

簡單的演示： https://jsfiddle.net/ox6m29f1/