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);
        }
    });
}
};

当然它不起作用，因为没有名为＆＃34; postImgId＆＃34;的元素，但是我如何访问此图像？

我希望有人可以帮助我。

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

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});

        }

使ng-repeat图像可拖动并获得其位置

1 个答案: