將拖放元素的位置傳遞給Django views.py

Question

我創建了2個拖放框，可以使用javascript在它們之間移動圖標：

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.getElementID(data));

和相關的html

<form action="" method="get">
 <div id="yes_box" ondrop="drop(event)" ondragover="allowDrop(event)"> 
  <img src="/icon/" draggable="true" ondragstart="drag(event)" />
  <input type="hidden" name="icon_pos" id="icon_pos" />
 </div> 

 <div id="no_box" ondrop="drop(event)" ondragover="allowDrop(event)">
 </div>
 <input type="sumbit" text="submit">
</form>

當用戶點擊提交按鈕時，我想使用pos = request.GET('icon_pos')類的圖標傳遞給Django views.py。 我需要在JavaScript中添加什么來更新“ icon_pos”的值？

我在網上看到過類似的示例，但是由於我對javascript非常陌生，所以我不確定如何使它們適應我的情況。

提前致謝。

Answer 1

我要做的是利用一個可以在提交表單時引用的變量：

var pos = 'yes_box'; // Assuming it starts there

然后放下，您將更新目標：

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    pos = ev.target.id; // 'pos' becomes the ID of the DIV
}

然后，您可以將pos傳遞給Django :)

另外，您將示例復制為錯誤：

ev.dataTransfer.setData("text", ev.targer.id)

應該：

ev.dataTransfer.setData("text", ev.target.id)

希望這可以幫助！