jQuery ui可拖動<select>標籤

Question

選擇標籤可拖動不起作用。我能用這個做什麼？

<div id="draggable"> 
    <select style="width: 200px;"> 
    </select> 
</div> 

$(document).ready(function(){ 
    $('#draggable').draggable(); 
}); 

演示：https://jsfiddle.net/wrqLwyk6/2/

Answer 1

其實，<div>是可拖動的，但你應該實際點擊並拖動<div>本身，而不是<select>。幾乎所有的表單控件（如<textarea>）都以類似的方式拖動。要測試這個，只需添加一個背景顏色或<div>並將其餘區域拖動到<select>的右側。

但用戶不知道這個看不見的區域（如果有的話）。這是處理這種情況下，我們有handle選項：

$(document).ready(function() { 
 
    $('#draggable').draggable({ 
 
    handle: '.handle' 
 
    }); 
 
});

#draggable .handle { 
 
    display: inline-block; 
 
    float: left; 
 
    width: 20px; 
 
    height: 20px; 
 
    background: dodgerblue; 
 
    border: 1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<div id="draggable"> 
 
    <span class="handle"></span> 
 
    <select style="width: 200px;"> 
 
    </select> 
 
</div>

在演示中，單擊並拖動它被用作手柄的藍色框。

Answer 2

這可能會幫助你

HTML：

<ul id="draggable"> 
<li> 
    <select style="width: 200px;"> 
    <option>56456456456</option> 
    <option>sdfsdf</option> 
    </select> 
    </li> 
<ul> 

CSS：

#draggable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
#draggable li { margin: 0 3px 3px 3px; padding: 0.4em; cursor:move; } 

腳本：

$(document).ready(function(){ 
    $('#draggable').draggable(); 
}); 

檢查在：https://jsfiddle.net/759td80m/