Drag And Drop Form Handling

[Adamhumbug]

Hi, not sure if this is more of a JS or PHP question but here goes.

I have a form that populates people into a box.  There name is on a div that looks like a button.  Also inside the div are 2 hidden inputs. 

I plan on dragging some people from box 1 into box 2.

When moving, i would like everyone in box 2 to have their second hidden input to be changed so when i submit it will be clear who was in which box.

It currently looks like this when populated if that helps anyone.

<div class="mt-3 col-6">
	<div class="container border border-dark p-1 h-50" ondrop="drop(event)" ondragover="allowDrop(event)">
		<div class="alert alert-warning text-center">Making Own Way</div>
		<div id="2" class="btn btn-primary m-1" data-id="2" data-role="Manager" draggable="true" ondragstart="drag(event)">
			<input class="staff" name="staff[]" type="hidden" value="2">
			<input class="transMethod" name="trans[]" type="hidden" value="mow">
		Chelsea Hockley</div><div id="16" class="btn btn-primary m-1" data-id="16" data-role="Manager" draggable="true" ondragstart="drag(event)">
		<input class="staff" name="staff[]" type="hidden" value="16">
		<input class="transMethod" name="trans[]" type="hidden" value="mow">
	TEST MANAGER</div>							</div>
</div>
<div class="mt-3 col-6">
	<div class="container container border border-dark p-1 h-50" ondrop="drop(event)" ondragover="allowDrop(event)">
		<div class="alert alert-primary text-center">Need Transport Daily</div>
	</div>
</div>

 

[ginerjm]

IF you are not planning on having the server do the work for you and then re-displaying the page, then you definitely will be using JS.

[Adamhumbug]

31 minutes ago, ginerjm said:

IF you are not planning on having the server do the work for you and then re-displaying the page, then you definitely will be using JS.

ok thanks for that if an admin would be so kind as to move this, it would be appreciated.

[Adamhumbug]

I have the following script in here if this is going to help

 

	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)); 
	  
	}