jQuery ui Draggable with <select> tag - jquery-ui

Question

With select tag draggable does not work. What can I do with this?
<div id="draggable">
<select style="width: 200px;">
</select>
</div>
$(document).ready(function(){
$('#draggable').draggable();
});
Demo: https://jsfiddle.net/wrqLwyk6/2/

Answer 1

This may help you
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; }
Script:
$(document).ready(function(){
$('#draggable').draggable();
});
Check at : https://jsfiddle.net/759td80m/

Answer 2

Actually, the <div> is draggable, but you should actually click and drag on the <div> itself, not the <select>. Almost all of the form controls like <textarea> blocks dragging in similar way. To test this, just add a background color or something to <div> and drag the remaining area to the right of <select>.
But users wouldn't be aware of this invisible area (if there is any). It is to handle such situations we have the handle option:
$(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>
In the demo, click and drag the blue box which is used as handle.