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>

すべてのアイデアは、最も参考になります！ W3Schoolsの自体から

出典

2016-09-03 qts

チェックこれを：

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)のドラッグを開始し、それがdataTransfer.setDataを通じてIDです保存されます。そして矩形の上にドロップすると、drop(ev)は以前に保存されたIDで要素を取得し、それをそれ自身に追加します。だから、それはその長方形になります。

出典

2016-09-04 06:37:37

bootstrap：ドロップダウンからテキストをドラッグする方法

答えて

関連する問題