When used in table cell(td), ngDraggable not giving target container attributes where an item is being dropped

问题

As mentioned in Question it always gives the object/attributes of the item being dragged rather than the item on which it is being dropped. This issues comes when ng-drag and ng-drop is used on table cell/row.

I Searched on forums but there was no solution given. Later found that it is mentioned in ngdraggable forums that it does not support table.

回答1:

I have fixed the issue for self by passing additional attributes in case of drop event

Below are the code changes inside directive. I am sharing the below as reference example and it may help someone struggling with same issue.

 .directive('ngDrop', ['$parse', '$timeout', '$window', '$document', 'ngDraggable', function ($parse, $timeout, $window, $document, ngDraggable) {
...
...
...
...
 var onDragEnd = function (evt, obj) {
if (attrs.ngDropSuccess) {
                        amTarget=attrs;
                        $timeout(function(){
                            onDropCallback(scope, {$data: obj.data, $event: obj, $target: scope.$eval(scope.value), $dropTarget:amTarget});
                        });
                    }

the below 2 lines passes the target container attributes to the caller

***amTarget=attrs;

$dropTarget:amTarget***

This has fixed the issue for me as I am passing target container attributes. Here below is the usage.

<td ng-drag="true" ng-drag-data="obj" data-allow-transform="true" ng-drop="true" ng-drop-success="onDropComplete($data,$event,$dropTarget)" > Row 1 </td>

added below in controller:

$scope.onDropComplete= function (data, event, dropTarget) {
    //   debugger;
    var target = dropTarget.$$element[0];

"dropTarget" holds the details and attributes of object where item was dropped.

来源：https://stackoverflow.com/questions/54033630/when-used-in-table-celltd-ngdraggable-not-giving-target-container-attributes

标签

ngdraggable