将拖放元素的位置传递给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)

希望这可以帮助！