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 s：拖延 2.拖到

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

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

Answer 2

好的，我已经找到了答案。修复版是HTML：

<div ng-repeat="grid in draggableObjects" class="grids">
    <div class="grid grid-normal" ng-drag="true" ng-drag-data="grid" draggable="true" ng-class="grid.name" ng-drop="true" ng-drop-success="onDropComplete($index, $data,$event)">{{grid.name}}</div>
</div>

而不是

<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>

ngDraggable无法将网格拖放到其位置

2 个答案: