jQuery の div のドラッグ、div の移動、ポップアップ レイヤーの実装原則と example_jquery

コードのデモ:

http://www.imqing.com/demo/movediv.html

一般原則:

div の位置を絶対にしてから制御しますその上と左の値は、主にマウスダウン、マウスムーブ、マウスアップなどのマウスイベントを監視する必要があります。

マウスダウン後、マウスの位置とマウスダウン中に移動する必要がある div を記録し、その 2 つの差を取得してマウス移動後の div の位置を取得します。つまり、

left = 現在のマウス位置.x - (マウスがクリックされたときの .x 値 - div の初期位置の x 値)
top = 現在のマウス位置.y - (.マウスがクリックされたときの y の値 - div の初期位置 y の値)

コード:

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

🎜>

バナー">ここをクリックして現在の div を移動します< ;/div>

他のコンテンツはこちら

著作権

🎜>jQuery(document).ready (
function () {
$('#banner').mousedown(
function (event) {
var isMove = true;
var abs_x = イベント.ページX - $(' div.moveBar').offset().left;
var abs_y = イベント.pageY - $('div.moveBar').offset().top; document).mousemove(function (event ) {
if (isMove) {
var obj = $('div.moveBar');
obj.css({'left':event.pageX - abs_x , 'top':event.pageY - abs_y});
}
}
).mouseup(
function () {
isMove = false;
}
) ;
}
);



実際にはコードはそれほど多くありません はい、ふふ。重要な点は、移動する必要がある div の位置が絶対に配置されてから、マウス イベントが検出されることです。おいおい。