Passing the position of drag and drop element to Django views.py

Question

I've created 2 drag and drop boxes which an icon can be moved between them using the 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));

and the relevant 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>

When the user hits the submit button I would like to pass to Django views.py the position of the icon using something like pos = request.GET('icon_pos') . What do I need at add to my javascript to update the value of 'icon_pos'?

I've seen similar examples online but since I'm very new to javascript I'm not sure how to adapt these to my situation.

Thanks in advance.

Answer 1

What I would do is make use of a variable that can be referenced upon form submission:

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

Then on drop, you would update the target:

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
}

Then you can just pass pos through to Django :)

Also, you copied the example wrong:

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

Should be:

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

Hope this helps!