Изменение порядка элементов списка с помощью перетаскивания ⇐ Html

[Anonymous]

Я использовал следующий HTML и TS для перетаскивания элементов списка из одного div в другой.

Html:

Код: Выделить всё

[h4] Drag and Drop list in Green Area: [/h4]
[list]
[*]
i am list 1

[*]
i am list 2

[*]
i am list 3

[*]
i am list 4

[/list]

[h4] Drop Here [/h4]

И Typescript содержит следующее:

Код: Выделить всё

  allowDrop(ev) {
ev.preventDefault();
}

drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
}

Это из перетаскивания Html5, и я могу перетаскивать элементы списка из div с классом listArea в div с классом buildArea.

После удаления элементов списка пользователь может изменить порядок элементов списка, которые были перенесены в div buildArea.

Например, заданный порядок: я список 1,2,3,4,5 может измениться на любой порядок, например 2,4,5,3,1 или на любой другой, который хочет пользователь.

На данный момент я использовал только angular и машинописный текст, и никакой сторонний плагин не был добавлен, и мне также нужен результат без какой-либо третьей стороны или jquery.

Я также искал это, но не смог получить правильный решение и, следовательно, любезно помогите мне добиться изменения порядка в выброшенном списке.

Ссылка stackblitz была https://stackblitz.com/edit/angular-wyimor

Подробнее здесь: https://stackoverflow.com/questions/521 ... g-and-drop