Arrastre de diálogo de implementación de jQuery

Antes de que el líder del proyecto me pidiera que implementara un cuadro de diálogo fijo que se pueda arrastrar, de acuerdo con el código que se encuentra en Internet, escribí un método de arrastre del cuadro de diálogo. Hoy compartiré con ustedes mi código. 

function moveDialog(moveHeadId, dialogId) {
   var dialog = $("#" + dialogId);
    var moveHead = $("#" + moveHeadId);
    moveHead.bind("mousedown",function (event) {
        var offset_x = dialog[0].offsetLeft;
        var offset_y = dialog[0].offsetTop;
        var mouse_x = event.pageX;
        var mouse_y = event.pageY;
        $(document).bind("mousemove", function (event) {
            var _x = event.pageX - mouse_x;
            var _y = event.pageY - mouse_y;
            var windowWidth = $(window).width();
            var windowHeight = $(window).height();
            var dialogWidth = $("#" + dialogId).width();
            var dialogHeight = $("#" + dialogId).height();
            var now_x = offset_x + _x;
            //不超过左边界
            now_x = (now_x < 0 ? 0 : now_x);
            //不超过右边界
            now_x = (now_x > windowWidth - dialogWidth ? windowWidth - dialogWidth : now_x) + "px";
            var now_y = offset_y + _y;
            //不超过上边界
            now_y = (now_y < 0 ? 0 : now_y);
            //不超过下边界
            now_y = (now_y > windowHeight - dialogHeight ? windowHeight - dialogHeight : now_y) + "px";
            dialog.css({
                top: now_y,
                left: now_x
            })
        })
    });
    $(document).bind("mouseup", function (event) {
        $(this).unbind("mousemove");
    })
}

 

Publicado 34 artículos originales · recibido 1 · vistas 1946

Supongo que te gusta

Origin blog.csdn.net/qq_38974638/article/details/104753499
Recomendado
Clasificación