使用 ng-repeat 拖放排序答案

【问题标题】：Drag and drop ordering with ng-repeat使用 ng-repeat 拖放排序
【发布时间】：2016-04-22 12:35:48
【问题描述】：

这是我的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 指令通过 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);
        }
    }
});

【问题讨论】：

标签： angularjs drag-and-drop ng-repeat

【解决方案1】：

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

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

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

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();

这为我解决了这个问题。也许它对某人有用。

【讨论】：