在表单元格(td)中使用时,ngDraggable不会在放置项目的位置提供目标容器属性

时间:2019-01-04 05:43:49

标签: ngdraggable

正如问题中提到的,它总是给出要拖动的项目的对象/属性,而不是要拖放到其上的项目。在表单元格/行上使用ng-dragng-drop时会出现此问题。

我在论坛上搜索,但未提供解决方案。后来发现在ngdraggable论坛中提到它不支持表格。

1 个答案:

答案 0 :(得分:0)

我已经通过在发生掉落事件时传递其他属性解决了自我问题

下面是指令内部的代码更改。我分享以下内容作为参考示例,它可能会帮助遇到相同问题的人。

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

下面两行将目标容器属性传递给调用者

*** amTarget = attrs;

$ dropTarget:amTarget ***

当我传递目标容器属性时,这为我解决了这个问题。下面是用法。

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

在控制器下面添加了

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

“ dropTarget”保存放置了物品的对象的详细信息和属性。