【JavaScript】iPhoneでも要素のリサイズ
どうも！LSSです！！
【CSS】要素のリサイズを可能にしてみました - Little Strange Software
で、CSSでのリサイズ許可を行う方法について書きましたが、これがどうもiPhoneではうまく行かない^^;
ので、JavaScriptを使って「PCでもiPhoneでも、大きさを変えられる」ようにしてみました。
JavaScriptで要素リサイズ
CSSでは出来ない事もJavaScriptなら…！
↑の四角い枠の中で、マウスドラッグ（またはスワイプ）すると、枠の大きさが変化します。
右ドラッグで幅が拡がり、下ドラッグで高さが増し、左と上は小さくなります。
コード
<style>
#rsz{
overflow:hidden;
border:1px solid black;
user-select:none;
}
</style>
<div id="rsz">CSSでは出来ない事もJavaScriptなら…！</div>
<p>
<script>
gw=60;gh=30;
mf=false;
rsz.addEventListener('mousedown',md,false);
rsz.addEventListener('mousemove',mm,false);
rsz.addEventListener('mouseup',mu,false);
rsz.addEventListener('mouseleave',mu,false);
rsz.addEventListener('touchstart',md,false);
rsz.addEventListener('touchmove',mm,false);
rsz.addEventListener('touchend',mu,false);
rsz.addEventListener('touchleave',mu,false);
evX=e=>(e.type.substr(0,5)=='touch'?e.changedTouches[0]:e).pageX;
evY=e=>(e.type.substr(0,5)=='touch'?e.changedTouches[0]:e).pageY;
rszs();
function md(e){
mf=true;
bx=evX(e);
by=evY(e);
}
function mm(e){
if(mf){
gw+=evX(e)-bx;
gh+=evY(e)-by;
bx=evX(e);
by=evY(e);
rszs();
e.preventDefault();
}
}
function mu(e){
mf=false;
}
function rszs(){
rsz.style.width=gw+'px';
rsz.style.height=gh+'px';
}
</script>
</p>
青太字部分は好きな文字に変更してご利用いただけます。
赤太字部分が「最初の大きさ」で、gwが幅、ghが高さをあらわしています。
ただ、理由は後述しますが、幅はあまり小さくし過ぎないほうが無難です。
難がない…わけでもなかったり
これで、iPhoneでもサイズ変更が出来る事を確認しました。
また、CSSの場合は「枠の右下」を狙って掴む必要がありましたが、今回のものは枠内ならどこでもサイズ変更を始められます。
なのですが…またしてもiPhoneでは別の難がありました^^;
iPhoneのブラウザ（はてなアプリ、Safari、Chromeのいずれも）「画面の左端から右スワイプすると『戻る』動作になる」という仕様があります。
そのため、あまり枠の幅が狭い場合、「左端からの右スワイプ」とみなされてしまい、サイズ変更どころではなくなってしまいます。
（ブラウザ既定の動作をキャンセルするpreventDefault()も入れていますが、それでも^^;）
そのため、「gw=60;」の60の数値はあまり小さくしすぎないほうが無難そうです。
個人的な裏話
実は、この「JavaScriptでの、マウスドラッグによるサイズ変更」、
【ツール】簡易お絵描きアプリ【試作品＋】 - Little Strange Software
の画像枠サイズ変更に組み込む予定のネタだったりします。
そこから「これはこれで、単体のネタにしてもいいかも？」と思ったのもつかの間。
CSSにresizeプロパティがあったのを思い出し、以前に試みた時にはできなかったのがoverflowをあわせて指定する事で成功したため、「CSSにちょこっと指定するだけで出来る事を長いJavaScriptのコードでやる価値はないか^^;」と、お蔵入りにしたのでした。
ところが、resizeプロパティがiPhoneでなぜか動作しなかった事から、「あ、じゃあ一応これも出す意味はあるのかな？」とネタとして復活した、という経緯があったりしますｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
