javascript - ngDraggable 无法将网格放置到其位置

Question

我正在尝试对我的应用程序实现拖放操作，但发现了一个问题。我正在使用 https://github.com/fatlinesofcode/ngDraggable 中的 ngDraggable 模块。我可以拖动 div 并将其移动到屏幕上，但无法放下它。如果我把它扔掉，它会飞回原来的地方，继续在原来的地方移动。我正在尝试做与重新排序示例中相同的事情。

这是我的代码:

JS:

$scope.draggableObjects = [
            {name: 'one'},
            {name: 'two'},
            {name: 'three'},
            {name: 'four'},
            {name: 'five'},
            {name: 'six'}
        ];


$scope.onDragComplete=function(data,evt){
    console.log("drag success, data:", data);
};
$scope.onDropComplete = function (index, obj, evt) {
    var otherObj = $scope.grids[index];
    var otherIndex = $scope.grids.indexOf(obj);
    $scope.grids[index] = obj;
    $scope.grids[otherIndex] = otherObj;
}

HTML:

<div ng-repeat="grid in draggableObjects" ng-drop="true" ng-drop-success="onDropComplete($index, $data,$event)" class="grids ng-scope">
        <div class="grid grid-normal ng-scope" ng-drag="true" ng-drag-data="grid" ng-class="grid.name" class="ng-binding one">Add a new chart</div>
    </div>

所以我有对象列表和回调函数，但它不起作用。另外，我注意到我的代码与示例没有添加拖动和拖过类，不知道为什么，也许这会导致问题。

Answer 1

您需要提供 2 个 div: 1. 拖自 2. 拖至

拖动到div时使ng-drag="true"您还可以使用其中提供的功能。

对于第一个 div，您需要在此处给出 ng-drag="true"ng-drag-data="e" "e" > 是来自某个数据源的元素。