Question

我正在准备重复的图表。

我已经将拖动属性应用到<div>，我可以拖动div元素，但是如果在ng-repeat上添加了多个图表，那么它是行为不端的，如果我拖动任何只有第一个div拖动其他图表。

这是我的代码（我使用Dev Extreme使用Angularjs准备图表）

<div style="background-color:white;" id="myElement" dx-dragenter="dragEnter($event)" dx-dragleave="dragLeave($event)" >
                  <div ng-repeat="chart in FinalPieData" id="innerElement" dx-drag="dragged($event)" dx-dragstart="dragStarted($event)" dx-dragend="dragStopped($event)">
                <div class="col-lg-6" ng-repeat="pie in chart" ng-mouseleave="HideTitlePieOnLeave()">
                    <div id="ibtMulPie" class="ibox float-e-margins">
                                         <div  ng-mouseover="ShowTitlePie(pie)">
                            <div class="demo-container">
                                <div id="pie" dx-pie-chart="pie"></div>
                            </div>
                        </div>
                    </div>
                </div>

</div>
</div>

拖动代码JS

 //pie
    $scope.dragStarted = function () {
        $("#innerElement").css("background-color", draggedColor);
        initialTop = parseInt($("#innerElement").css("top"));
        initialLeft = parseInt($("#innerElement").css("left"));
        initialPointerY = arguments[0].clientY;
        initialPointerX = arguments[0].clientX;
    };
    $scope.dragged = function () {
        $("#innerElement").css("top", initialTop + arguments[0].clientY - initialPointerY);
        $("#innerElement").css("left", initialLeft + arguments[0].clientX - initialPointerX);
    };
    $scope.dragStopped = function () {
        $("#innerElement").css("background-color", "green");
    };
    $scope.dragEnter = function () {
        draggedColor = "red";
        $("#innerElement").css("background-color", draggedColor);
    };
    $scope.dragLeave = function () {
        draggedColor = "yellow";
        $("#innerElement").css("background-color", draggedColor);
    };

Answer 1

重复的div都具有相同的id。您可以像这样使所有ID都是唯一的：

ng-repeat="chart in FinalPieData track by $index" id="innerElement{{$index}}"

现在你可以使用传递给拖动函数的事件来获取元素，或者也可以传入id并在你的选择器中使用它，如下所示：在html中

dx-dragstart="dragStarted($event, $index)"

在控制器中

$scope.dragStarted = function (event, index) {
    var elementid = "#innerElement" + index;
    $(elementid).css("background-color", draggedColor);
    initialTop = parseInt($(elementid).css("top"));
    initialLeft = parseInt($(elementid).css("left"));
    initialPointerY = arguments[0].clientY;
    initialPointerX = arguments[0].clientX;
};

如何在angularjs中拖动ng重复的特定div

1 个答案: