bootstrap：如何將文本從下拉列表中選擇

我正在學習如何實現拖放操作並具有選擇下拉列表。此下拉菜單顯示了幾個選項，我希望用戶能夠將選項文本拖到另一個框中。bootstrap：如何將文本從下拉列表中選擇

根據this tutorial我所要做的就是set the draggable attribute to true。

我曾嘗試以下，但拖動似乎不工作：

<div class="container"> 
    <label>My List</label> 
     <select class="form-control"> 
      {{#each my_list}} 
       <option value="{{this}}" draggable="true">{{this}}</option> 
      {{/each}} 
     </select> 
</div>

我也做這個使用jQuery UI試過：

<div class="container"> 
    <label>My List</label> 
     <select class="form-control"> 
      {{#each my_list}} 
       <option value="{{this}}" id="draggable">{{this}}</option> 
      {{/each}} 
     </select> 
</div> 

<script> 
    $("#draggable").draggable(); 
</script>

任何想法將是最有幫助！

來源

2016-09-03 qts

入住這從W3Schools的本身：

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
#div1 { 
    width: 350px; 
    height: 70px; 
    padding: 10px; 
    border: 1px solid #aaaaaa; 
} 
</style> 
<script> 
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)); 
} 
</script> 
</head> 
<body> 

<p>Drag the W3Schools image into the rectangle:</p> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
<br> 
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> 

</body> 
</html>

只是set the draggable attribute to true將無法正常工作。你必須做更多。

這裏發生了什麼：

當你開始拖動drag(event)叫並將其保存它的ID通過dataTransfer.setData。當你放在矩形上時，drop(ev)通過先前保存的ID獲取元素並將其附加到自身。所以它會在那個矩形中。

來源

2016-09-04 06:37:37

bootstrap：如何將文本從下拉列表中選擇

回答

相關問題