JavaScript:ドラッグイベント
2303 ワード
ここではマウスをドラッグしたイベントの実現です.原理は以下の通りです.
マウスを押した瞬間に、ドラッグするオブジェクトにマウスで押したマークflugを追加して、trueに設定します.マウスを離すとflugをfalseに設定します.flugがtrueであれば、マウスは押した後、放していないということです.flugがtrueである場合、マウス移動イベントが発生したら、オブジェクトのleft属性とtop属性はマウスの座標点XとYからマウスを押した時のオブジェクト距離の水平と垂直距離を設定します.
今日やっとFireFoxのインストールに成功しました.上のコードはFFと互換できないので、下記のように修正しました.
マウスを押した瞬間に、ドラッグするオブジェクトにマウスで押したマークflugを追加して、trueに設定します.マウスを離すとflugをfalseに設定します.flugがtrueであれば、マウスは押した後、放していないということです.flugがtrueである場合、マウス移動イベントが発生したら、オブジェクトのleft属性とtop属性はマウスの座標点XとYからマウスを押した時のオブジェクト距離の水平と垂直距離を設定します.
//
function drag(obj){
// , true
obj.onmousedown = function(){
this.flg = true;
// div
this.startX = event.clientX - this.offsetLeft;
this.startY = event.clientY - this.offsetTop;
}
// , false
obj.onmouseup = function(){
this.flg = false;
}
// , ,
obj.onmousemove = function(){
if(this.flg){
// left top div
this.style.left = event.clientX - this.startX + "px";
this.style.top = event.clientY - this.startY + "px";
}
}
}
今日やっとFireFoxのインストールに成功しました.上のコードはFFと互換できないので、下記のように修正しました.
(function (){
var $ = EventHelper = window.EventHelper = {};
$.addHandler = function(ele,type,fn){
if (ele.addEventListener) {
ele.addEventListener(type,fn,false);
} else if(ele.attachEvent){
ele.attachEvent("on"+type,fn);
} else {
ele["on"+type] = fn;
}
};
$.removeHandler = function(ele,type,fn){
if (ele.removeEventListener) {
ele.removeEventListener(type,fn,false);
} else if(ele.detachEvent){
ele.detachEvent("on"+type,fn);
} else {
ele["on"+type] = null;
}
};
})();
function drag(obj){
obj.style.position = "absolute";
EventHelper.addHandler(obj,"mousedown",function(e){
e = window.event || e;
this.flg = true;
this.startX = e.clientX - this.offsetLeft;
this.startY = e.clientY - this.offsetTop;
});
EventHelper.addHandler(obj,"mouseup",function(e){
this.flg = false;
});
EventHelper.addHandler(obj,"mouseout",function(e){
this.flg = false;
});
EventHelper.addHandler(obj,"mousemove",function(e){
e = window.event || e;
if(this.flg){
this.style.left = e.clientX - this.startX + "px";
this.style.top = e.clientY - this.startY + "px";
}
});
}
しかし、FireFoxに問題があります.マウスを押して放さないと、ブラウザはオブジェクトをドラッグして、マウスを移動していると思っています.本当にこの問題はどう解決するべきか分かりません.指導者がほしいです.