Question

我正在使用以下代码。我能够拖动而不是掉落。如何在drop上调用dropFunction是我的问题？

Drag code:
            <div>
            <a class="button" ng-class="{editing: mode == modes.edit_rows}" ng-repeat="col in definition.columns" ng-click="editColumn($index)"
                dnd-type="'columnPills'" 
                dnd-draggable="event"
                dnd-effect-allowed="copy"
                dnd-copied=""
                dnd-effect-allowed="move"
                dnd-moved="moveAndDeletePills(definition.rows,$index)">{{name.toString()}}</a></div>

Drop code:
            <div dnd-allowed-types="'columnPills'"
            dnd-drop="dropFunction(event, index, item, external, type, definition)"
            dnd-dragover="true"
            dnd-droppable="true">
            </div>

我甚至尝试在没有任何参数的情况下调用drop函数dropFunction（），但仍未调用该函数。

Answer 1

你是否退回了＆＃39;项目＆＃39;在回调？即。

  $scope.dropCallback = function(event, index, item, external, type, allowedType) {
    if (external) {
        ...
        return false;
    }
    return item;
  };

以下是来自文档，注意它所说的＆＃34;它必须返回将要插入的对象＆＃34;

＆＃34; dnd-drop在列表上放置元素时调用的可选表达式。如果设置了表达式，则必须返回将插入到列表中的对象。如果返回false，则将中止放置并传播事件。＆＃34;

https://github.com/marceljuenemann/angular-drag-and-drop-lists

Answer 2

感谢@sjm的回答，但除了回调之外，我们还必须确保在删除代码上使用dnd-list，因为dnd库仅适用于列表。

此外，列表必须作为争论传递，并且正在删除的新对象将添加到列表中。

在研究和执行代码后，我很乐意分享正确的代码。

Drag Code:
                 <div>
                 <li class="button" ng-class="{editing: mode == modes.edit_rows}" ng-repeat="col in definition.columns" ng-click="editColumn($index)"
                 dnd-type="'col'" 
                 dnd-draggable="col"
                 dnd-effect-allowed="move"
                 dnd-moved="moveAndDeletePills(definition.rows,$index)">{{name.toString()}}</li>               
                 </div>


Drop Code:
        <div dnd-allowed-types="'col'"
        dnd-list="definition.rows"
        dnd-drop="dropFunction(event, index, item, external, type, definition)"
        dnd-dragover="true"
        dnd-droppable="true">

        <li class="button" ng-repeat="row in definition.rows" ng-click="editRow($index)"</li>
        </div>

使用dnd库实现拖放

2 个答案: