ホームページ > 記事 > ウェブフロントエンド > JavascriptでDOM要素をドラッグ可能にする_基礎知識
JavascriptでDOM要素をドラッグ可能にする_基礎知識
- WBOYオリジナル
- 2016-05-16 15:10:071647ブラウズ
概要:
最近、プロジェクトに画像プレビュー機能を構築したいと考えていますが、このとき、ビュー インターフェイスを超える非常に大きな画像をアップロードするユーザーに遭遇します。最後に、幅と高さが固定された位置を作成し、ユーザーが画像をドラッグして表示できるようにすることにしました。そこで、ie5+、chrome、Firefox、opera などのブラウザー用のドラッグ可能な DOM 要素をサポートするプラグインを作成しました。
次のように、この関数の実装に必要な 知識ポイント はそれほど多くありません。
1. js の element.style.leftstyle.left によって返される変数は文字列および変数 variable です
js の
element.offsetLeftoffsetLeft は、int 型の不変変数を返します (つまり、この変数を変更してもレイアウトには影響しません)
2. js のevent.clientX
clientX イベント プロパティは、イベントがトリガーされたときにブラウザ ページ (またはクライアント領域) へのマウス ポインターの水平座標を返します。
3. js の element.className
上記の 3 点はいずれも比較的身近な知識です。私が言いたいのは次のようなことです。
4. js にオブジェクトのイベント監視を追加します
element.addEventListener("イベント","楽しい","ブール");
event: イベントを示します
楽しい: イベントがトリガーされた後に実行される関数を指します
プロジェクトアドレス:
https://github.com/baixuexiyang/drag
例:
var drag = new Drag("test", {
onStart: function(){
},
onMove: function(){
document.getElementById('position').innerHTML = '距离左边：' + drag.getPositions().left + '；距离顶部：' + drag.getPositions().top;
},
onStop: function(){
}
});
例を見てみましょう: (テストの便宜上、コードをファイルに書きました)
ドラッグ.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>鼠标拖拽</title>
<style type="text/css">
<!--
#dragdiv{
background-color:#0A0909;
height:200px;
width:157px;
position:absolute;
}
.ondrag{
filter:alpha(opacity=200);
cursor:move;
}
.enddrag{
filter:alpha(opacity=100);
cursor:default;
}
#father{
width:600px;
height:700px;
background:#C63535;
}
-->
</style>
</head>
<body>
<div id="father">
<div id="dragdiv"></div>
</div>
<script language="JavaScript">
var dragdiv=document.getElementById("dragdiv");
var father=document.getElementById("father");
var offsetx=0;
var offsety=0;
var draging=false;
function beforeDrag(ev){
if (!draging) {
draging = true;
var l = dragdiv.offsetLeft;
var t = dragdiv.offsetTop;
offsetx = ev.clientX - l;
offsety = ev.clientY - t;
}
else {
dragdiv.className = "enddrag";
dragdiv.removeEventListener("mousemove",onDrag);
draging = false;
return;
}
}
function endDrag(){
draging=false;
dragdiv.className="enddrag";
}
function onDrag(ev){
if (!draging) {
dragdiv.className = "enddrag";
return;
}
else {
dragdiv.className = "ondrag";
dragdiv.style.left = (ev.clientX - offsetx) + "px";
dragdiv.style.top = (ev.clientY - offsety) + "px";
}
}
dragdiv.addEventListener("mousedown",beforeDrag,true);
dragdiv.addEventListener("mousemove",onDrag,false);
dragdiv.addEventListener("mouseup",endDrag,true);
</script>
</body>
</html>
上記のマウスイベント
「mousedown」は、マウスが押されたときにこのイベントがトリガーされることを意味します (beforeDrag 関数は上記でトリガーされます)
「mousemove」は、マウスが移動するとこのイベントがトリガーされることを意味します (onDrag 関数は上記でトリガーされます)
「mouseup」は、マウスが押されてから離されたときにこのイベントがトリガーされることを意味します。 (endDrag 関数は上記でトリガーされます)
追記: オンラインで確認したマウス時間は「onmousedown」です。著者が「onmousedown」をテストしたところ、イベント応答はありませんでしたが、「mousedownm」は正常でした。
上記の問題について、addEventListener の順序の問題や、第 3 パラメータ true/false のイベントフローの問題を考慮して、多くの実験を試みましたが、まだ完全な解決策を見つけることができません
「mouseup」イベントは 2 回目の監視に失敗しましたが、通常はフォーカスを取り戻します (マウスを別の場所でクリックするだけです)
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。