JavaScriptイベント処理とマウスドラッグエフェクト実装を詳しく解説_JavaScriptスキル

まず、ドラッグされるレイヤー (シミュレーション ウィンドウ) のレンダリングを見てみましょう。

ドラッグ効果を実現するには: ウィンドウの上のタイトル バーでマウスの左ボタンを押し、同時にマウスを動かすと、それに応じてウィンドウが移動します。
ウィンドウ:

コードをコピー コードは次のとおりです:

ウィンドウを自由に移動すると、ウィンドウの位置は絶対になります。
ウィンドウにタイトル バーを追加します。ここでは、ウィンドウの上部に配置されたレイヤーが使用され、タイトル バーのマウス カーソルが設定されます。 ) 図形をドラッグ (移動) します (Chrome でドラッグすると、カーソルがテキスト カーソルに変わり、マウス ボタンを放すと元に戻ります)。

コードをコピー コードは次のとおりです。

#win {

position:absolute ;
幅:480px;
高さ:320px;
背景色:#4d4d4;
#win_header; 480px;
height:48px;
background-color:#4d4d4d;


指定された要素を取得するユーティリティ関数を定義しますID 属性:




コードをコピー

コードは次のとおりです:

function $id(id) { return document .getElementById(id); }

ブラウザのコア ID isIE を定義します:

var isIE = (window.navigator.userAgent.indexOf("IE" ) == -1 ) ? false : true;
ウィンドウ要素とそのタイトルバーを取得します:

コードをコピーします


コードは次のとおりです:

var win = $id("win"); var header = $id("win_header");マウスとウィンドウの位置情報を簡単に記録するために、位置を作成します:

コードをコピー


コードは次のとおりです:

var pos =function(x, y ) {

this.x = x; this.y = };ウィンドウの初期位置（CSSの左の値と上の値）を設定します。 なぜここでこれら 2 つの属性を設定するのに js を使用しないと値を取得できず、CSS で指定しても機能しません。

コードをコピーします


コードは次のとおりです:

varoriginalpos = new pos(20, 20) );


ウィンドウのドラッグ中に記録する必要がある値は次のとおりです:

マウスが押されたときのマウス カーソルの位置 コードをコピーします

コードは次のとおりです。

var oldmouse =new pos(0, 0); 🎜>
マウスが押されたときのウィンドウの位置
var oldpos = new pos(0, 0)
マウスが移動したときのウィンドウの新しい位置

var newpos = new pos (0, 0); ウィンドウの初期位置を設定しますコードをコピーします

コードは次のとおりです:

win.style.left =originalpos.x "px";
win .style.top =originalpos.y "px";


ブラウザー (IE と非 IE) では、イベント ハンドラーを要素にバインドする方法が異なります (IE はattachEvent を使用し、IE 以外の IE は addEventListener を使用します)。イベント バインディング操作を簡素化するために、イベント バインディング関数を定義します。

コードをコピーします コードは次のとおりです。

function binding(ev, func) {
if(isIE) {
header.attachEvent("on" ev, func);

header.addEventListener(ev, func, false); >

これらの作業を行った後、マウス イベントの処理を開始できます。
このプログラムでは、マウスの左ボタンのみでウィンドウをドラッグし、他のキーではドラッグできないため、マウスの左ボタンが押されたかどうかを判断する必要があります。この判定はいくつかの関数で使用されるため、関数に抽出され、渡されたパラメータ (マウス キーの値、つまりどのキーが押されたか) によって判定されます。ここで、ブラウザ間の違いに注意する必要があります。IE ではマウスの左ボタンの値は 1 ですが、IE 以外では値は 0 です。

コードをコピーします コードは次のとおりです:

function isLeftButton(btn) {
if(isIE) {
if(btn == 1)
return true;
else
return false;
if(btn == 0)
return true;
else
return false; >}
}


ドラッグ アクションは、マウスの左ボタンを押して移動することで実行されます。このアクションを共有するには、マウスは最初に押すアクション (mousedown) をトリガーし、次に移動アクション (mousemove) をトリガーします。本当にドラッグしているのか、それともマウスがウィンドウ上を通過しているだけなのかを判断するには、マウス ダウン状態を記録する変数を設定します。

var Mousedown = false;
CSS の互換性の問題のため、ここで js を使用してください。マウスがウィンドウのタイトル バー上にあるときの色の変化を制御します。
ホバリング

コードをコピー コードは次のとおりです:

function over(e) {

Header.style.backgroundColor = "#5d5d5d"
}


残す

コードをコピー コードは次のとおりです。

function out(e) {

header.style.backgroundColor = "#4d4d4d"
// マウスが動かない場合があります。 be release ウィンドウを離れます、
// このとき、マウスリリースイベント
up(e)
}

Press
press イベントでは、まずマウスの左ボタンが押されたかどうかを判断する必要があります。

押された場合は、その時点でのマウスとウィンドウの位置が記録されます。そうでない場合は記録されません。記録される。

コードをコピー コードは次のとおりです。 function down(e) {

e = e || イベント;

if(!isLeftButton(e.button))
mousedown = true;
oldmouse.x = e.clientX; e.clientY ;
oldpos.x = parseInt(win.style.left.replace("px", ""));
oldpos.y = parseInt(win.style.top.replace("px") , "" ));
}


リリース

コードをコピー

コードは次のとおりです function up(e) { if(!isLeftButton(e.button)) return;

mousedown = false;

の移動には、
を押して移動するという 2 つのマウス イベントが含まれます。移動アクションはマウスの左ボタンが押されている間のみ有効です。
ウィンドウの新しい位置は、ドラッグ状態でのマウスの移動距離(XとYの間の距離)によって決まります。つまり、
左ボタンが押されたときに記録された位置に新しいマウスの位置が送信され、距離が取得されます。次に、マウスの移動距離にウィンドウの位置が加算されて、新しい位置が取得されます。窓。

コードをコピー

コードは次のとおりです。 function move(e) { if(! isLeftButton(e.button)) return; e =e イベント;

newpos.x = e.clientX - oldmouse.x; >newpos.y = e.clientY - oldmouse.y

win.style.left = (oldpos.x newpos.x) "px";
win.style.top = (oldpos.y newpos.y) "px" ;
}
}


最後に要素をバインドしましょう。




コードをコピー

コードは次のとおりです。

bind("mouseover", over); バインド("マウス入力", オーバー); バインド("マウス退出", アウト); バインド("ブラー", アウト); >bind( "mousedown", down); bind("mouseup", move);

ただし、ドラッグには問題があります。 FFでは最初だけは普通にドラッグできますが、その後は少し厄介になります。