jQuery drag効果でフリードラッグdivを実現
3094 ワード
偶然以前にした簡潔なdivドラッグ効果を見て、注釈を少し修正して、firefox/chrome/ie 6-11に完璧に合格して、今持ってきて分かち合います.
まず実現原理と要点をお話ししますが、最も重要なのは3つのステップです.最初のステップはmousedownイベントで、マウスmousedownのときにこのときのマウスのX軸とY軸とドラッグボックスのleftとtopを記録し、ドラッグマークにtrueを割り当て、ドラッグ動作の準備を表します.第2のステップはmousemoveイベントで、マウスのX軸とY軸を動的に取得し、ドラッグボックスの新しいleftとtopを計算し、ドラッグ効果を実現するために値を割り当てます.第3歩はmouseupイベントで、マウスが跳ね上がったときにドラッグマークにfalseを割り当て、ドラッグ動作が完了します.
htmlコードは次のとおりです.
最後に、ドラッグ操作を開始する前に、選択を禁止します.そうしないと、ドラッグ効果に影響します.firefoxとchromeはcssで設定できます:{-moz-user-select:none;-webkit-user-select:none;}ieはもともとhtmlに直接onselectstart=「return false」と書くこともできたが、chromeが少し影響を受けたようなので、この書き方をキャンセルし、jsでieブラウザにonselectstartイベントを書くことにした.
このプラグインはドラッグ効果を簡単に実現するだけですが、互換性がよく、知識点やテクニックも使われています.もちろん、このプラグインや中の考えを借りて拡張し続け、DraggableやDroppableのような完璧なドラッグプラグインを書くこともできます.
以上が本文のすべてですが、お好きになってください.
まず実現原理と要点をお話ししますが、最も重要なのは3つのステップです.最初のステップはmousedownイベントで、マウスmousedownのときにこのときのマウスのX軸とY軸とドラッグボックスのleftとtopを記録し、ドラッグマークにtrueを割り当て、ドラッグ動作の準備を表します.第2のステップはmousemoveイベントで、マウスのX軸とY軸を動的に取得し、ドラッグボックスの新しいleftとtopを計算し、ドラッグ効果を実現するために値を割り当てます.第3歩はmouseupイベントで、マウスが跳ね上がったときにドラッグマークにfalseを割り当て、ドラッグ動作が完了します.
htmlコードは次のとおりです.
Title--Move
js代码如下：
(function($) {
$.fn.dragDiv = function(divWrap) {
return this.each(function() {
var $divMove = $(this);//
var $divWrap = divWrap ? $divMove.parents(divWrap) : $divMove;//
var mX = 0, mY = 0;// X Y
var dX = 0, dY = 0;// div 、
var isDown = false;//mousedown
if(document.attachEvent) {//ie ， div ，firefox chrome css -moz-user-select: none; -webkit-user-select: none;
$divMove[0].attachEvent('onselectstart', function() {
return false;
});
}
$divMove.mousedown(function(event) {
var event = event || window.event;
mX = event.clientX;
mY = event.clientY;
dX = $divWrap.offset().left;
dY = $divWrap.offset().top;
isDown = true;//
});
$(document).mousemove(function(event) {
var event = event || window.event;
var x = event.clientX;// X
var y = event.clientY;// Y
if(isDown) {
$divWrap.css({"left": x - mX + dX, "top": y - mY + dY});//div
}
});
$divMove.mouseup(function() {
isDown = false;//
});
});
};
})(jQuery);
//
$(document).ready(function() {
$("#move1").dragDiv();// div
$("#move2").dragDiv(".divWrap");// div
});
最後に、ドラッグ操作を開始する前に、選択を禁止します.そうしないと、ドラッグ効果に影響します.firefoxとchromeはcssで設定できます:{-moz-user-select:none;-webkit-user-select:none;}ieはもともとhtmlに直接onselectstart=「return false」と書くこともできたが、chromeが少し影響を受けたようなので、この書き方をキャンセルし、jsでieブラウザにonselectstartイベントを書くことにした.
このプラグインはドラッグ効果を簡単に実現するだけですが、互換性がよく、知識点やテクニックも使われています.もちろん、このプラグインや中の考えを借りて拡張し続け、DraggableやDroppableのような完璧なドラッグプラグインを書くこともできます.
以上が本文のすべてですが、お好きになってください.