JavaScript
ドラッグ
JavaScriptUI

エレメントをマウスドラッグする(JavaScriptUI)

More than 3 years have passed since last update.

ホームページ上の要素をマウスで掴んで移動するページを作成します。そのような画面を作るJavaScriptのライブラリもたくさんありますが、考え方を整理する意味でも、ライブラリ(JQuery)を利用せず、JavaScript単体で実現したいと存じます。スマートフォン最適化や、優先度高なんて言われている今日、マウス依存のインターフェースってどうなのよと思いましたが、考え方を整理する意味はある・・・はずです。


実現したいこと

画面上の要素(エレメント)をマウスでドラッグできる。

マウス押下でポインタに追尾させ、マウス解放で動きを止めます。

処理概要

以下のように、3種類のイベントハンドラをセットする

イベントハンドラが検知したら、指定したFunctionをディスパッチする

・マウスのボタンを押下した

・マウスのボタンを押下した状態から、解放した

・マウスのボタンを移動した


処理

上の処理概要で記述した内容を実装する

JavaScript


drag.js

var move_flg = "";

var move_start_x = 0;
var move_start_y = 0;
// start drag
window.onmousedown = function(e) {
move_flg = "true";
move_start_x = event.clientX - parseInt(document.getElementById("obj").style.left.replace("px",""));
move_start_y = event.clientY - parseInt(document.getElementById("obj").style.top.replace("px",""));
}
// end drag
window.onmouseup = function(e) {
move_flg = "false";
}
// dræg
window.onmousemove = function(e) {
if(move_flg == "true") {
document.getElementById("obj").style.left = (event.clientX - move_start_x) + "px";
document.getElementById("obj").style.top = (event.clientY - move_start_y) + "px";
}
}

HTML


drag.html

<body>

<div id="obj" style="position:absolute;left:20px;top:20px;width:100px;height:100px;background-color:blue;cursor:move;" ></div>
</body>

HTMLにおける要素の位置は、設定方法が多数ありますが、デフォルトでは左上(X軸、Y軸)が基準となります。そのため、ドラッグ時には動かす要素の左上から、クリックした地点の誤差を加えてやる必要があります。それを踏まえて、以下のような処理になるかと存じます。


実装手順

ユーザが、要素をクリックする

・ドラッグ中フラグをON

ユーザが、要素をドラッグする

・マウスの動きを検知して、ドラッグ中フラグがONであれば、要素を移動する

・要素の左上座標から、クリック座標の誤差を取得、要素移動時に誤差を加える。

(誤差の計算方法:マウスポイント-クリックした要素の左上座標)

ユーザが、要素をドラッグ中から話す

 ・ドラッグ中フラグをOFF

サンプルページ