实践拖曳功能

情境：实践拖曳功能，并 POST 出对应栏位
类似这种单字游戏，把对应的答案移动到框框内，再送出答案

参考资料：

HTML Drag and Drop APIHTML 拖放 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);})}