Questions › How to make this square appear at specified X,Y coordinates when page loads up?

On this jsfiddle below, the square always appear at the top upper-left hand corner when the page loads.

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

What if I have specified x, y coordinates that I want the element to appear during page load-up?

Suppose I have these dummy functions;

function getX() 
{
    return 145;
}

function getY()
{
    return 125;
}

How do I use the above 2 dummy functions and modify the jsfiddle to make the white square appear at the designated x,y coordinates returned by getX() and getY()? In the actual code, the dummy functions retrieve the x,y coordinates from some backend system.

This question is actually a follow-up question to How to make this white square appear at centre by default instead of top upper-left hand corner?

The answers provided involve modifying css. However, I am using AngularJS and I don't think angularjs can be used on css.


2 Answers :
Rayon answered

You can try this:

I feel you need to set the values from the scope you are passing from the controller and read those values to set the position of the shape.

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

user781486 replied
Great work! Seems like the only changes made were startX: 150, startY: 150, in the controller? Is that correct?;
Rayon replied
And setInitPosition in the directive to read and set the position. Cheers!;
user781486 replied
Thanks. One thing puzzles me. I don't see anywhere in the code that calls setInitPosition(). How is it being called?;
Rayon replied
Its an self executing function. Also see the edit to place shape in the center.;
Rayon replied
No advantage in this particular case, I just wanted to differentiate that block of code.;
Jonas Eriksson answered

What about just setting the the positioning on the .shape in the css? i.e. (in this case?).

top: 130px;
left: 130px;

Edit, I see it's the same answer as in your other question. Of course Angular can be used with CSS though, why not?

If you want to do it programatically you could check out the angular.element.css() function. https://docs.angularjs.org/api/ng/function/angular.element