情境：實踐拖曳功能，並 POST 出對應欄位
類似這種單字遊戲，把對應的答案移動到框框內，再送出答案

參考資料：

• HTML Drag and Drop API
• HTML 拖放 API

• draggable | 要被拖曳的元素
• ondragstart | 當被拖曳(drag)，就會有 ondragstart 的 event (可以把想要做的 function 寫在這個事件)
• ondragover | 讓拖曳(drag)過來的資料可以被放置(drop)，但預設是不能被放置(drop)，所以要再加上 event.preventDefault()
• ondrop | 當被放置(drop)，就會有 ondrop 的 event (可以把想要做的 function 寫在這個事件)
• dataTransfer | 拖曳時要被轉移的資料，用 setData() 設置、getData() 取得

<div>
		<p>apple</p>
		<div id="apple" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>

<div>
		<p>banana</p>
		<div id="banana" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>

<div ondrop="drop(event)" ondragover="allowDrop(event)">
		<p id="answer_蘋果" draggable="true" ondragstart="drag(event)">蘋果</p>
</div>

<div ondrop="drop(event)" ondragover="allowDrop(event)">
		<p id="answer_香蕉" draggable="true" ondragstart="drag(event)">香蕉</p>
</div>

function allowDrop(ev) {
	ev.preventDefault();
}

// 拖曳
function drag(ev) {
	ev.dataTransfer.setData("text", ev.target.id); // 取得被拖曳元素的 id 暫存在 dataTreansfer，(ex. 當蘋果被拖曳，就會取到 id：answer_蘋果)
}

// 放置
function drop(ev) {
	ev.preventDefault();
	var data = ev.dataTransfer.getData("text"); 
	let text = document.getElementById(data); 
	ev.target.appendChild(document.getElementById(data)); // 抓 id 把被拖曳的元素放置
}

因為沒辦法 drag 到 input value， 最後用 id 取值

// 送出配對位置
function handleSubmit(){
	let data ={
		"answer_apple":$('#apple').children().attr('id'); // 直接取 id 當作值
	}
	$.ajax({
		type: 'POST',
		url:'your url',
		data: data,
		dataType: 'json'
	}).done(function(res) {
		console.log(res);		
	})
}