如何使用Java腳本的拖放功能創建提交按鈕？

Question

我需要創建一個對象（可以是div），當用戶將其拖動到特定位置時，它可以充當HTML提交按鈕。這需要在發佈後觸發一個動作。

Answer 1

我不認爲你真的需要任何按鈕才能工作。

你可以打電話給你的JS功能

-ondragstart - ondragover - ondrop

要根據你的代碼執行的操作運行。它們可以作爲您的觸發器

參見：http://www.w3schools.com/html/html5_draganddrop.asp

Answer 2

您可以使用HTML5拖放到做好這項工作。

var droppable = document.getElementById("droppable"); 
 
var draggable = document.getElementById("draggable"); 
 
var myForm = document.getElementById("myForm"); 
 

 
draggable.addEventListener("dragstart", function(e){ 
 
    e.dataTransfer.setData("text", e.target.id); 
 
}); 
 

 
droppable.addEventListener("dragover", function(e){ 
 
    e.preventDefault(); 
 
}); 
 

 
droppable.addEventListener("drop", function(e){ 
 
    e.preventDefault(); 
 
    var data = e.dataTransfer.getData("text"); 
 
    e.target.appendChild(document.getElementById(data)); 
 
});

#droppable { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 4px dotted #aaa; 
 
} 
 

 
#draggable { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: #ddd; 
 
}

<div id="droppable"></div> 
 
<br /> 
 
<div id="draggable" draggable="true"></div>

然後sumbit您的形式drop事件這樣

droppable.addEventListener("drop", function(){ 
    myForm.submit(); 
}); 

因爲你不能在這裏提交表單，我創建jsfiddle演示。