jQuery ドラッグ アンド ドロップ div 実装 idea_jquery

このアイデアは、jquery のmousemove、mousedown、mouseup の 3 つのイベントを使用して 2 つの相対位置、つまりコンポーネントの左上隅と画面の左上隅の相対位置

1 を定義することです。 🎜>
2. マウスの位置は、コンポーネントの左上隅を基準とした座標です。

具体的な関数は次のとおりです:

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

.drag{
位置:絶対;
背景:#0000CC;
上:100ピクセル;
}

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

$(document).ready (function(){

var move=false;//マークを移動
var _x,_y;//コントロールの左上隅からのマウスの相対位置
$(".drag" ).mousedown(function(e){
move=true ;
_x=e.pageX-parseInt($(".drag").css("left"));
_y=e. pageY-parseInt($(".drag").css("top"));
$(document).mousemove(function(e){
if(move){
var x=e.pageX-_x;//左上を制御 画面の隅から左上隅までの相対位置
var y=e.pageY-_y;
$(".drag ").css({"top":y,"left":x});
}
}).mouseup(function(){
move=false;
});


ここで、e.pageX、e.pageY は現在のマウス座標の水平方向と垂直方向です。

自分で試してみると、アイデアがより明確になります。