Search code examples
jqueryangularjsjquery-uidraggable

Get image position(x;y) in AngularJS

I'm trying to get an image's position(x;y), in my file.js side, here's what I got up till now:

screen

In circled red is my draggable image, as you can see the I was abble to get the position, but once I try to pass this values in the angular side, they show as undefined.

here is my code:

html side:

 <div ng-show="visible1" style="display: block;left: 20px;">

    Nom:<input ng-model="nameW" required></br>
    lieu: <input ng-model="locName" required></br>
    x:<div id="posX" ng-model="locX" ></div></br>
    x:<input   id="posXinput" ng-model="locXI" ></input></br>
    y:<div id="posY" ng-model="locY" ></div></br>
    y:<input  id="posYinput"   ng-model="locYI" ></input></br>
    <button ng-click="update(nameW,locName,locXI,locYI)">Valider</button>

</div>
</div >
<div style="bottom: 30px;left: 30px;position: absolute;">

<img src="pages/resources/img/téléchargement.jpg" draggable="true"   id="draggable" class="ui-widget-content" style="max-height: 20px;position: absolute;">

<img id="box" src="pages/resources/img/skyrim-map-by-mottis86-lg.jpg" style="max-width: 50%">
</div>
</div>

<script type="text/javascript" >

     $(function() {
    $("#draggable").draggable({
        containment: "#box",
        scroll: false,
        drag: function(event) {
            var top = $(this).position().top;
            var left = $(this).position().left;

            $('#posX').text(left);
            $('#posXinput').val(left);
            $('#posY').text(top);
            $('#posYinput').val(top);
        }
    });
});
</script>

in my js side:

 $scope.update = function (name,locName,locX,locY) {

        console.info(name,locName,locX,locY);

    };

What I get is: "u" "u" undefined undefined

I hope someone can help me.

Sorry for my english, it isn't my native language.

Solution

  • you can move your function in angular js file and give value in scope

        $scope.update = function (name, locName, locX, locY) {
        console.info(name, locName, locX, locY);
    };
    $(function () {
        $("#draggable").draggable({
           containment: "#box",
           scroll: false,
           drag: function (event) {
               var top = $(this).position().top;
               var left = $(this).position().left;        
               $('#posX').text(left);
               $scope.locXI = left;
               $('#posY').text(top);
               $scope.locYI = top;
           }
       });
   });

    And you can also use angular scope in JavaScript without move to angular file like this

    $(function () {
    $("#draggable").draggable({
        containment: "#box",
        scroll: false,
        drag: function (event) {
            var top = $(this).position().top;
            var left = $(this).position().left;

            $('#posX').text(left);
            $('#posXinput').val(left).change();
            var scope = angular.element($("#posXinput")).scope();
            scope.$apply(function(){
                scope.locXI = left;
            });
            $('#posY').text(top);
            $('#posYinput').val(top).change();
            var scope = angular.element($("#posYinput")).scope();
            scope.$apply(function(){
                scope.locYI = top;
            });
        }
    });
});