可移动弹出指令使弹出跳转到屏幕角落

Question

您好，我是 AngularJs 的新手，但我修改了一个非常酷的指令，允许我拖动模式弹出窗口...但是当我单击移动它时，它会跳到屏幕的左下角。

JS：

(function () {

    var schemaWizardApp = angular.module('schemaWizardApp');

    schemaWizardApp.directive('modaldraggable', function ($document) {
        "use strict";
        return function (scope, element) {
            var startX = 400,
                startY = 400,
                x = 400,
                y = 400;
            element= angular.element(document.getElementsByClassName("modal-dialog"));
            console.log("added directive");
            element.css({
                position: 'fixed',
                cursor: 'move'
            });

            element.on('mousedown', function (event) {
                // Prevent default dragging of selected content
                event.preventDefault();
                startX = event.screenX - x;
                startY = event.screenY - y;
                $document.on('mousemove', mousemove);
                $document.on('mouseup', mouseup);
            });

            function mousemove(event) {
                y = event.screenY - startY;
                x = event.screenX - startX;
                element.css({
                    top: y + 'px',
                    left: x + 'px'
                });
            }

            function mouseup() {
                $document.unbind('mousemove', mousemove);
                $document.unbind('mouseup', mouseup);
            }
        };
    });

})();

CSS：

 .modal-dialog {
        position: fixed;
        left: 40%;
    }

Answer 1

所以答案是我必须设置 x = 400,y = 400;到我想要的屏幕上的任何值。