JavaScript はマウスのドラッグを実装して div のサイズを調整します

この記事では、マウスをドラッグしてdivのサイズを調整するJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

実装のアイデア:

マウスの位置に基づいてマウスのスタイルを変更する
マウスがdivの端と四隅にある場合、カーソルによって異なるスタイルが表示され、変更されます。
divの端と四隅をマウスで押すと、特定の座標点の位置が記録され、マウスの動きに応じてdivのサイズが変更されます。
マウスを離すとサイズ変更が終了

コード実装:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>タイトル</title>
 <スタイル>
  本文、html {
   幅: 100%;
   高さ: 100%;
   マージン: 0;
  }

  ＃容器 {
   幅: 200ピクセル;
   高さ: 200px;
   パディング: 15px;
   境界線: #00cdcd 2px 実線;
   ボックスのサイズ: 境界線ボックス;
  }

  。アイテム {
   カーソル: デフォルト;
   幅: 100%;
   高さ: 100%;
   背景: #757575;
  }
 </スタイル>
</head>
<body id="body">
<div id="コンテナ">
 <div class="item"></div>
</div>
<スクリプト>
 //サイズを変更する必要があるdiv
 c = document.getElementById('コンテナ')
 // body は移動イベントをリッスンします document.getElementById('body').addEventListener('mousemove', move)
 // マウスダウンイベント c.addEventListener('mousedown', down)
 // マウスリリースイベント document.getElementById('body').addEventListener('mouseup', up)

 // サイズ変更を有効にするかどうか let resizeable = false
 // マウスが押されたときの座標、およびサイズを変更するときに前のマウス位置を保存する let clientX, clientY
 // div が変更できる最小の幅と高さ let minW = 8, minH = 8
 // マウスが押されたときの位置。n、s、w、e で表されます。let direc = ''

 //マウスを離すとサイズ変更が終了します function up() {
  サイズ変更可能 = false
 }

 // マウスが押されたときにサイズの変更を有効にする function down(e) {
  d = getDirection(e) とします。
  // 位置が4辺と4隅の場合にのみサイズ変更を有効にする if (d !== '') {
   サイズ変更可能 = true
   方向 = d
   クライアントX = e.clientX
   クライアントY = e.clientY
  }
 }

 // マウス移動イベント関数move(e) {
  d = getDirection(e) とします。
  カーソルを
  if (d === '') カーソル = 'default';
  それ以外の場合、カーソル = d + '-resize';
  // マウスの表示効果を変更します c.style.cursor = cursor;
  // サイズ変更が有効な場合、マウスの動きによって div のサイズが変更されます if (resizeable) {
   // マウスが右側で押されたら、幅を変更します if (direc.indexOf('e') !== -1) {
    c.style.width = Math.max(minW, c.offsetWidth + (e.clientX - clientX)) + 'px'
    クライアントX = e.clientX
   }

   // マウスが上部で押された場合、高さを変更します if (direc.indexOf('n') !== -1) {
    c.style.height = Math.max(minH, c.offsetHeight + (clientY - e.clientY)) + 'px'
    クライアントY = e.clientY
   }
   // マウスが下部で押された場合、高さを変更します if (direc.indexOf('s') !== -1) {
    c.style.height = Math.max(minH, c.offsetHeight + (e.clientY - clientY)) + 'px'
    クライアントY = e.clientY
   }

   // マウスが左側で押された場合、幅を変更します if (direc.indexOf('w') !== -1) {
    c.style.width = Math.max(minW, c.offsetWidth + (clientX - e.clientX)) + 'px'
    クライアントX = e.clientX
   }

  }
 }

 // マウスが位置するdivの位置を取得する function getDirection(ev) {
  xP、yP、オフセット、dir を設定します。
  ディレクトリ = '';

  xP = ev.offsetX;
  yP = ev.offsetY;
  オフセット = 10;

  (yP < オフセット) dir += 'n' の場合;
  そうでない場合、(yP > c.offsetHeight - offset) dir += 's';
  (xP < オフセット) dir += 'w' の場合;
  そうでない場合、(xP > c.offsetWidth - offset) dir += 'e';

  dir を返します。
 }
</スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: