javascript - 页面加载后如何使该正方形出现在指定的X，Y坐标上？

在下面的这个jsfiddle中，当页面加载时，正方形总是出现在左上角的顶部。

http://jsfiddle.net/helpme128/3kwwo53t/2/

如果我指定了我希望元素在页面加载期间出现的x，y坐标怎么办？

假设我有这些虚拟功能；

function getX()
{
    return 145;
}

function getY()
{
    return 125;
}

如何使用上述2个虚拟函数并修改jsfiddle以使白色正方形出现在getX()和getY()返回的指定x，y坐标上？在实际的代码中，伪函数从某个后端系统检索x，y坐标。

此问题实际上是How to make this white square appear at centre by default instead of top upper-left hand corner?的后续问题

提供的答案涉及修改css。但是，我使用的是AngularJS，我不认为angularjs可以在CSS上使用。

最佳答案

您可以尝试以下方法：

我觉得您需要设置从scope传递的controller的值，并读取这些值以设置形状的位置。

angular.module('test', [])

    .directive('ngDraggable', function ($document) {
    return {
        restrict: 'A',
        scope: {
            dragOptions: '=ngDraggable'
        },
        link: function (scope, elem, attr) {
            var startX, startY, x = 0,
                y = 0,
                start, stop, drag, container;

            var width = elem[0].offsetWidth,
                height = elem[0].offsetHeight;

            // Obtain drag options
            if (scope.dragOptions) {
                start = scope.dragOptions.start;
                drag = scope.dragOptions.drag;
                stop = scope.dragOptions.stop;
                var id = scope.dragOptions.container;
                if (id) {
                    container = document.getElementById(id).getBoundingClientRect();
                }
                (function setInitPosition() {
                    x = scope.dragOptions.startX;
                    y = scope.dragOptions.startY;
                    setPosition();
                })();
            }
            // Bind mousedown event
            elem.on('mousedown', function (e) {
                e.preventDefault();
                startX = e.clientX - elem[0].offsetLeft;
                startY = e.clientY - elem[0].offsetTop;
                $document.on('mousemove', mousemove);
                $document.on('mouseup', mouseup);
                if (start) start(e);
            });

            // Handle drag event
            function mousemove(e) {
                y = e.clientY - startY;
                x = e.clientX - startX;
                setPosition();
                if (drag) drag(e);
            }

            // Unbind drag events
            function mouseup(e) {
                $document.unbind('mousemove', mousemove);
                $document.unbind('mouseup', mouseup);
                if (stop) stop(e);
            }

            // Move element, within container if provided
            function setPosition() {
                if (container) {
                    if (x < container.left) {
                        x = container.left;
                    } else if (x > container.right - width) {
                        x = container.right - width;
                    }
                    if (y < container.top) {
                        y = container.top;
                    } else if (y > container.bottom - height) {
                        y = container.bottom - height;
                    }
                }

                elem.css({
                    top: y + 'px',
                    left: x + 'px'
                });
            }
        }
    }

})

    .controller('testCtrl', function ($scope) {
        var boundingRect = document.getElementById('container').getBoundingClientRect();
        var shapeRect = document.getElementsByClassName('shape')[0].getBoundingClientRect();
    $scope.dragOptions = {
        start: function (e) {
            console.log("STARTING");
        },
        drag: function (e) {
            console.log("DRAGGING");
        },
        stop: function (e) {
            console.log("STOPPING");
        },
        startX: (boundingRect['width'] / 2) - (shapeRect['width'] / 2),
        startY: (boundingRect['height'] / 2) - (shapeRect['height'] / 2),
        container: 'container'
    }

});

#container {
    width : 300px;
    height: 300px;
    background-color: black;
}
.shape {
    position: absolute;
    width : 40px;
    height: 40px;
    background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="test" ng-controller="testCtrl">
    <div id="container">
        <div class="shape" ng-draggable='dragOptions'></div>
    </div>
</div>

Fiddle here