Jquery 使ng重复图像可拖动并获取其位置

我想让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>

{{工作站.标识符}
{{workstations.name}
{{工作站.本地化}
{{工作站.本地化}
身份证：


姓名：

x:

y:

这是我的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);
        }
    });
}
};

for（变量i=0；i<$scope.workStation.length；i++）{
var postImgId=“postImg”+$scope.workStation[i]。标识符；
$（“#postImgId”）.draggable({
遏制：“地图”，
卷轴：错，
拖动：函数（事件）{
locY=$（this）.position（）.top；
locX=$（this）.position（）.left；
$（'#posX'）.text（locX）；
$（'#posY'）。文本（locY）；
}
});
}
};

当然，它无法工作，因为没有名为“

positmgid

”的元素，但我如何访问此图像

我希望有人能帮助我

---

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

我改变了我的策略，现在可以用了：

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>

---

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

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>