HTML元素拖動JS

wenco發表於2018-09-20
HTMLJS

話不多說，直接貼程式碼，下面的案例是以bootstrap的模態框為例的，html程式碼就不在這裡貼了。

/**
 * 模態框拖動
 *
 * 1、記錄滑鼠點下時的座標及模態框的位置
 * 2、滑鼠抬起給mouseDragDown一個false值
 * 3、如果mouseDragDown為true則進行相應的計算並根據計算結果對模態框的offset進行相應的修改
 *
 */
var mouseStartPoint;
var mouseEndPoint;
var mouseDragDown;
var oldP;
var moveTarget;
$("body").on("mousedown", ".modal-header", function (e) {
    if ($(e.target).hasClass("close")) return;
    mouseDragDown = true;//可拖動
    moveTarget = $(this).parent();
    mouseStartPoint = {"left": e.clientX, "top": e.clientY};
    oldP = moveTarget.offset();
});
$(document).on("mouseup", function (e) {
    mouseDragDown = false;//不可拖動，座標復位；
});
$(document).on("mousemove", function (e) {
    if (!mouseDragDown) return;
    var mousX = e.clientX;
    var mousY = e.clientY;
    mouseEndPoint = {"left": mousX, "top": mousY};
    var movementX = mouseStartPoint.left - mouseEndPoint.left;//往左邊移動是正值，往右移動是負值
    var movementY = mouseEndPoint.top - mouseStartPoint.top;//往下移動是正值，往上移動是負值
    moveTarget.offset({
        left:oldP.left - movementX,
        top:oldP.top + movementY
    })
});
複製程式碼

相信看一下程式碼就全都明白了，就是當滑鼠按下的時候記錄需要用到的位置，然後進行數學計算。

相關文章