javascript - 使用 dnd 库实现拖放

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

你在回调中返回“item”吗？即

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

以下来自文档，请注意其中所说的“它必须返回将插入的对象”

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

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