JavaScript CSS改造学習 第6章 ドラッグ＆ドロップ_基礎知識

dragDrop.initElement('test');<br>dragDrop.initElement(document.getElementById('test2'));

dragDrop = {
keyHTML: '#',
keySpeed: 10, // キーを押すごとのピクセルイベント
initialMouseX: 未定義、
initialMouseY: 未定義、
startX: 未定義、
startY: 未定義、
dXKeys: 未定義、
dYKeys: 未定義、
draggObject:未定義、
initElement: function (要素) {
if (typeof element == 'string')
element = document.getElementById(element);
element.onmousedown =ragDrop.startDragMouse;
element.innerHTML =ragDrop.keyHTML;
var links = element.getElementsByTagName('a');
var lastLink = links[links.length-1];
lastLink.relativeElement = 要素;
lastLink.onclick =ragDrop.startDragKeys;
},
startDragMouse: function (e) {
dragDrop.startDrag(this);
var evt = e ||ウィンドウ.イベント;
dragDrop.initialMouseX = evt.clientX;
dragDrop.initialMouseY = evt.clientY;
addEventSimple(document,'mousemove',dragDrop.dragMouse);
addEventSimple(document,'mouseup',dragDrop.releaseElement);
false を返します。
},
startDragKeys: function () {
dragDrop.startDrag(this.popularElement);
dragDrop.dXKeys = ドラッグドロップ.dYKeys = 0;
addEventSimple(document,'keydown',dragDrop.dragKeys);
addEventSimple(document,'keypress',dragDrop.switchKeyEvents);
this.blur();
false を返します。
},
startDrag: function (obj) {
if (dragDrop.draggedObject)
dragDrop.releaseElement();
dragDrop.startX = obj.offsetLeft;
dragDrop.startY = obj.offsetTop;
dragDrop.draggedObject = obj;
obj.className = 'ドラッグ';
},
dragMouse: function (e) {
var evt = e ||ウィンドウ.イベント;
var dX = evt.clientX -ragDrop.initialMouseX;
var dY = evt.clientY -ragDrop.initialMouseY;
dragDrop.setPosition(dX,dY);
false を返します。
},
dragKeys: function(e) {
var evt = e ||ウィンドウ.イベント;
var key = evt.keyCode;
スイッチ (キー) {
case 37: // left
case 63234:
dragDrop.dXKeys -=ragDrop.keySpeed;
休憩;
ケース 38: // 上
ケース 63232:
dragDrop.dYKeys -=ragDrop.keySpeed;
休憩;
ケース 39: // 右
ケース 63235:
dragDrop.dXKeys =ragDrop.keySpeed;
休憩;
case 40: // down
case 63233:
dragDrop.dYKeys =ragDrop.keySpeed;
休憩;
ケース 13: // 入力
ケース 27: // エスケープ
dragDrop.releaseElement();
false を返します。
デフォルト:
trueを返します。
}
dragDrop.setPosition(dragDrop.dXKeys,dragDrop.dYKeys);
if (evt.preventDefault)
evt.preventDefault();
false を返します。
},
setPosition: function (dx,dy) {
dragDrop.draggedObject.style.left =ragDrop.startX dx 'px';
dragDrop.draggedObject.style.top =ragDrop.startY dy 'px';
},
switchKeyEvents: function () {
// Opera および Safari 1.3 の場合
removeEventSimple(document,'keydown',dragDrop.dragKeys);
removeEventSimple(document,'keypress',dragDrop.switchKeyEvents);
addEventSimple(document,'keypress',dragDrop.dragKeys);
},
releaseElement: function() {
removeEventSimple(document,'mousemove',dragDrop.dragMouse);
removeEventSimple(document,'mouseup',dragDrop.releaseElement);
removeEventSimple(document,'keypress',dragDrop.dragKeys);
removeEventSimple(document,'keypress',dragDrop.switchKeyEvents);
removeEventSimple(document,'keydown',dragDrop.dragKeys);
dragDrop.draggedObject.className =ragDrop.draggedObject.className.replace(/dragged/,'');
dragDrop.draggedObject = null;
}
}

initElement: function ( element) {
if (typeof element == 'string')
element = document.getElementById(element);
element.onmousedown =ragDrop.startDragMouse
element.innerHTML =ドラッグドロップ.keyHTML;
var links = element.getElementsByTagName('a');
var lastLink = リンク[links.length-1];
lastLink.onclick = ragDrop.startDragKeys;
},

startDrag: function (obj) {
if (ドラッグドロップ.ドラッグオブジェクト)
ドラッグドロップ.releaseElement();
ドラッグドロップ.startX = obj.offsetTop;
ドラッグドロップ.ドラッグオブジェクト = obj; obj.className = 'dragged';
},


まず、要素がドラッグされた状態にある場合は、それを解放します (これについては後で説明します)。
次に、関数は開始位置 (offsetLeft と offsetTop) で要素の座標を見つけ、後で使用できるようにそれらを startX と startY に保存します。

ドラッグドロップ.ドラッグオブジェクト.スタイル.トップ = ドラッグドロップ.スタートY 'px ';
}、


この関数は、マウスとキーボードの動きと初期位置によって計算された dX と dY を使用して、要素の新しい位置を設定します。
この部分は非常に単純です。複雑な部分は、マウス部分とキーボード部分の処理が大きく異なります。

マウス部分のコード
マウス部分の計算はキーボードに比べて複雑ですが、ブラウザの互換性の点では大きな問題はありません。それでは、マウス部分から始めます。
イベント
まず、イベントについて説明します。当然のことながら、オブジェクトの選択、ドラッグ、およびドラッグのアクションを完了するには、ドラッグ プロセス中にマウスダウン、マウスムーブ、およびマウスアップが必要です。
この一連のイベントは、要素のドラッグを必要とするマウスダウン イベントから始まります。したがって、すべてのドラッグ要素は、ドラッグが開始されたことを示すためにこのイベントを必要とします。
ただし、mousemove イベントと Mouseup イベントは要素ではなくドキュメント全体に設定する必要があります。ユーザーがマウスを素早く、必死に動かし、ドラッグした要素を見失う可能性があるからです。要素に設定すると、マウスが要素上にないために制御不能になる可能性があり、使いやすさにとっては良くありません。
ドキュメント上でmousemoveとmouseupを設定すると、そのような問題は発生しません。マウスがどこにあっても、要素はmousemoveとmouseupに応答します。これはとても使いやすいです。
また、mousemoveとmouseupはドラッグ開始後にのみ設定でき、ユーザーが要素を放したときに削除できます。 Mousemove は多くのシステム リソースを消費するため、このコードは非常にクリーンでシステム リソースを節約します。
Mousedown
ドラッグ要素でマウスダウン イベントが発生すると、startDragMouse 関数の実行が開始されます:

まず、前に説明した startDrag が実行されます。次に、マウスの座標を見つけて、initialMouseX とinitialMouseY に保存します。後でマウスの位置をこれと比較します。

最後に false が返されます。これは、デフォルトのマウス イベント (テキストの選択) を防ぐために使用されます。煩わしいので、ドラッグ時にテキストが選択されることを望まなくなりました。

次に、ドキュメントのmouseupイベントハンドラとmousemoveイベントハンドラを設定します。ドキュメントには独自の Mouseup および Mousemove イベント ハンドラーがある可能性があるため、addEventSimple 関数を使用して、元のイベント ハンドラーが失敗するのを防ぎます。

Mousemove
これで、ユーザーがマウスを移動すると、dragMouse 関数が実行されます。