HTML元素拖动JS

话不多说，直接贴代码，下面的案例是以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
    })
});
复制代码

相信看一下代码就全都明白了，就是当鼠标按下的时候记录需要用到的位置，然后进行数学计算。

转载于:https://juejin.im/post/5ba3456f5188255c451ea62e