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;无论我想要的屏幕上有什么价值。

Movable Popup Directive使Popup跳转到Screen的角落

1 个答案: