使ng-repeat图像可拖动并获得它们的位置

Question

我想使得可以拖动的ng-repeat图像并获得它们的位置，但是由于id是动态创建的，我不知道该怎么做。

这里是我的HTML代码：

<table ng-table="tableParams"> 
    <tr ng-repeat="workstations in workStation" index="{{workstations.identifier}}" style="height: 35px;"> 
     <td data-title="'Id'" > 
      {{workstations.identifier}} 
     </td> 
     <td data-title="'name'"> 
      {{workstations.name}} 
     </td> 

     <td data-title="'X'" > 
      {{workstations.localisationX}} 
     </td> 
     <td data-title="'Y'" > 
      {{workstations.localisationY}} 
     </td> 

     <td data-title="'WS'"> 
      <div class="dragImg"> 
       <img src="pages/resources/img/téléchargement.jpg" ng-init="makeDraggable()" id="postImg{{workstations.identifier}}" style="height: 32px; width: auto;position: absolute" > 
      </div> 
     </td> 
    </tr> 
</table> 
<div ng-show="visible1" style="display: block;left: 20px;"> 

    id:<div id="currentWS"></div></br></br> 

    name:<input ng-model="nameW1" ></br> 
    x:<div id="posX" ng-model="locX" ></div></br> 
    y:<div id="posY" ng-model="locY" ></div></br> 

</div> 
</div > 
<div id="containerMap"> 
    <div id="dropHere"> 
     <img id="map" src="pages/resources/img/skyrim-map-by-mottis86-lg.jpg" style="height: auto; width: 100%"> 
    </div> 
</div> 

</div> 

这里是我的js的一面：

for (var i = 0; i < $scope.workStation.length; i++) { 

    var postImgId = "postImg" + $scope.workStation[i].identifier; 

    $("#postImgId").draggable({ 
     containment: "#map", 
     scroll: false, 
     drag: function (event) { 
      locY = $(this).position().top; 
      locX = $(this).position().left; 
      $('#posX').text(locX); 

      $('#posY').text(locY); 
     } 
    }); 
} 
}; 

当然也不能工作，因为没有名为 “postImgId” 元素，但再怎么我可以访问这个图片吗？

我希望有人能帮助我。

对不起，我的英语不是母语。

Answer 1

我改变了我的策略，现在它工作：

HTML：

<table ng-table="tableParams"> 
    <tr ng-repeat="workstations in workStation" index="{{workstations.identifier}}" style="height: 35px;"> 
     <td data-title="'Id'" > 
      {{workstations.identifier}} 
     </td> 
     <td data-title="'name'"> 
      {{workstations.name}} 
     </td> 

     <td data-title="'X'" > 
      {{workstations.localisationX}} 
     </td> 
     <td data-title="'Y'" > 
      {{workstations.localisationY}} 
     </td> 

     <td data-title="'WS'"> 
      <div class="dragImg"> 
       <div class="dragImg" style="position: absolute"> 
       <img src="pages/resources/img/téléchargement.jpg" ng-init="makeDraggable()" ng-click="whichId(workstations.identifier)" lass="img-drag" id="postImg{{workstations.identifier}}" style="height: 32px; width: auto;" > 
      </div> 
     </td> 
    </tr> 
</table> 
<div ng-show="visible1" style="display: block;left: 20px;"> 

    id:<div id="currentWS"></div></br></br> 

    name:<input ng-model="nameW1" ></br> 
    x:<div id="posX" ng-model="locX" ></div></br> 
    y:<div id="posY" ng-model="locY" ></div></br> 

</div> 
<button ng-click="change()">Modify x,y </button> 

<div id="containerMap"> 
    <div id="dropHere"> 
     <img id="map" src="pages/resources/img/skyrim-map-by-mottis86-lg.jpg" style="height: auto; width: 100%"> 
    </div> 
</div> 

</div> 

的.js

$scope.makeDraggable=function() { 





    $(".dragImg").draggable({ 
     containment: "#map", 
     scroll: false, 
     drag: function (event) { 



      locY = $(this).position().top; 
      locX = $(this).position().left; 


      console.info(); 

      $('#posX').text(locX); 

      $('#posY').text(locY); 

     } 
    });  
     }; 

$scope.whichId=function (id) { 
      currentWorkStation=id; 
      console.info(currentWorkStation); 
     } 

$scope.change=function() { 

      console.info(currentWorkStation,locX,locY); 

      WorkStation.updateXY({identifier: currentWorkStation,localisationY: locY ,localisationX: locX}); 

     }