Django drag drop помогите пожалуйста
Мне нужна помощь с функцией drag-n-drop для обновления таблицы в моей модели Django.
Мне нужно иметь возможность перетаскивать элементы (список объектов модели) между 3 корзинами и обновлять тип корзины элемента в модели. Моя модель содержит элементы питания и статус этих элементов. Таким образом, food.names будут перетаскиваемыми предметами, а 3 корзины - food.status: "нет", "есть", "нужно купить". Как в этом примере: https://www.javascripttutorial.net/sample/webapis/drag-n-drop-basics/.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#div1, #div2, #div3 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<h2>Drag and Drop</h2>
<p>Drag the items back and forth between the three div elements.</p>
{% for row in all_food %}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
{% if row.status_type == 'have'%}
<ul>
<li><a href="/" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">{{row}}</a>
</ul>
{% endif %}
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
{% endfor %}
</body>
</html>
Код выше выглядит как 33 ящика с элементами в цикле for, разбросанными по ящикам.
Я в основном использую Python и не имею большого опыта работы с front end кодом, поэтому мне очень нужна помощь в настройке html части. Буду очень признателен за любую помощь!