2
CSS Grid layoutを使用する場合のみ、JSなしでサイズ変更可能なペインを実装したいと考えています。これは可能ですか？CSSグリッドレイアウトを使用して、エディタペインのサイズ変更を実装することができます（CodePenなど）
CodePenのエディタには、HTML/CSS/JSエディタのサイズ変更可能なペインがあります。また、以下の例をプレーンJSで実装しています（CodePenの例にURLを追加できないようですので、属性を追加するのは少し難しいです。コードはhttp://codepen.io/gsound/です）。
let isResizing = false;
let $handler = document.getElementById('handler');
let $wrapper = document.getElementById('wrapper');
let $left = document.getElementById('left');
$handler.addEventListener('mousedown', function(e){
isResizing = true;
});
document.addEventListener('mousemove', function(e){
if(!isResizing) return;
let newWidth = e.clientX - $wrapper.offsetLeft;
$left.style.width = newWidth + 'px';
});
document.addEventListener('mouseup', function(){
isResizing = false;
});html,body{
height: 100%;
width: 100%;
margin: 0;
}
#app{
height: 100%;
/* max-width: 1400px; */
margin: 0 auto;
}
header{
background-color: #AAA;
height: 50px;
}
#wrapper{
margin: 0 auto;
height: calc(100% - 50px);
width: 100%;
background-color: #EEE;
display: flex;
}
#handler{
background-color: red;
width: 5px;
cursor: col-resize;
}
#left{
width: 200px;
}
#content{
width: 100%;
flex: 1;
}
/* ----------- */
#left{
background-color: yellow;
}
#content{
background-color: #232378;
}<div id="app">
<header>head</header>
<div id="wrapper">
<aside id="left"></aside>
<div id="handler"></div>
<article id="content"></article>
</div>
</div>P.Sサイドノートとして、私は、例えば、再実装しています'mousemove'、'mouseup'イベントを追加したり削除したりして、ブール値isResizingを使用し、常にイベントリスナーを保持するよりもパフォーマンスが優れているかどうかは不思議に思っていました...