引導程序：如何從下拉列表中拖動文本

Question

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

根據本教程，我要做的就是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>

任何想法將是最有幫助的！

Answer 1

從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) ，它將通過dataTransfer.setData保存其ID。 當您將drop(ev)放在矩形上時， drop(ev)將通過先前保存的ID獲取元素並將其附加到自身。 因此它將在該矩形中。

引導程序：如何從下拉列表中拖動文本

問題描述

1 個解決方案

解決方案1
0 2016-09-04 06:37:37

引導程序：如何從下拉列表中拖動文本

問題描述

1 個解決方案

解決方案1 0 2016-09-04 06:37:37

解決方案1
0 2016-09-04 06:37:37