Перетащите порядок с помощью ng-repeat

Question

Перетащите порядок с помощью ng-repeat

0

Это мой 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 через dataTransfer. В событии "drop" данные (активность JSON) добавляются в контроллер, а getAll() возвращает все сброшенные действия. Теперь это работает. Но я не могу изменить порядок этих действий, так как падение только подталкивает активность к списку. Что мне делать, если я хочу, чтобы я мог поместить одну деятельность между двумя действиями или, возможно, перестроить их?

РЕДАКТИРОВАТЬ:

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

Myone 22 апр. 2016, в 14:45

Источник

Теги:

angularjs

drag-and-drop

ng-repeat

1 ответ

Ещё вопросы

Myone · Answer 1 · 2016-04-22T14-06-00.000Z

Я нашел решение самостоятельно. Я сделал это, чтобы добавить это в элемент hgml draggable:

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

Затем в директиве draggable в событии 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();

Это решило это для меня. Возможно, это может быть полезно кому-то.