时间戳

首页 > 解决方案 > 当在表格单元格（td）中使用时，ngDraggable 不提供正在删除项目的目标容器属性

ngdraggable - 当在表格单元格（td）中使用时，ngDraggable 不提供正在删除项目的目标容器属性

问题描述

正如问题中提到的，它总是给出被拖动项目的对象/属性，而不是被拖放的项目。这个问题在表格单元格/行上使用ng-drag时出现。ng-drop

我在论坛上搜索但没有给出解决方案。后来发现在ngdraggable论坛中提到它不支持table。

标签： ngdraggable

解决方案

我已经通过在 drop 事件的情况下传递其他属性来解决 self 的问题

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

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

以下 2 行将目标容器属性传递给调用者

***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”保存项目被删除的对象的详细信息和属性。

推荐阅读