Question

这是我的HTML：

<div ng-repeat="activity in activities">
  <button id="{{activity.id}}" activity=activity draggable>
    {{activity.name}}
  </button>
</div>

<div droppable handle="handleDrop(activity)">
  <div ng-repeat="activity in getAll()">
    <button>
      {{activity.name}}
    </button>
  </div>
</div>

如你所见，我有两个指令，draggable和droppable。 draggable指令通过dataTransfer将活动数据发送到droppable指令。在事件'drop'上，数据（活动JSON）被添加到控制器，getAll（）返回所有被删除的活动。现在，这有效。但是我无法更改这些活动的顺序，因为drop只会将活动推送到列表中。如果我希望能够在两个活动之间放置一个活动，或者重新安排它们，我该怎么办？

编辑：

app.directive('droppable', function () {
    return {
        scope: {
            handle: '&'
        },
        link: function (scope, element) {

            element.on('dragover', function (e) {
                e.preventDefault();
            });

            element.on('drop', function (e) {
                e.preventDefault();
                var activity = JSON.parse(e.originalEvent.dataTransfer.getData("text"));
                scope.handle({activity: activity});
                scope.$apply();

            });
        }
    };
});

app.directive('draggable', function () {

    return {
        scope: {
            'activity' : '='
        },

        link: function (scope, element) {
            var el = element[0];
            el.draggable = true;

            el.addEventListener('dragstart', function (e) {
                e.dataTransfer.setData("text", JSON.stringify(scope.activity));
            }, false);
        }
    }
});

Answer 1

我自己找到了解决方案。我所做的是将其添加到html draggable元素：

data-index="{{$index}}"

然后，在dragenter事件的draggable指令中，我添加了：

if(e.target.hasAttribute('draggable')) {
    e.target.classList.add('insert');
}

insert类添加一些样式以显示用户即将在两个元素之间删除。在drop事件中，我添加了：

var i = e.target.getAttribute('data-index');
if (i !== null) {
    scope.handle({activity: activity, index: i});
} else {
    scope.handle({activity: activity});
}
scope.$apply();

这为我解决了。也许这对某人有用。

使用ng-repeat拖放排序

1 个答案: