Question

使用选择标记draggable不起作用。我该怎么办？＆lt; div id =＆＃34; draggable＆＃34;＆gt; ＆lt; select style =＆＃34; width：200px;＆＃34;＆gt; ＆LT; /选择＆GT; ＆LT; / DIV＆GT; $（文件）。就绪（函数（）{ $（＆＃39;＃拖动＆＃39）。可拖动（）; }）; 演示：https：//jsfiddle.net/wrqLwyk6/2/

Answer 1

这可能对您有所帮助

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/

Answer 2

实际上，<div>是可拖动的，但实际上您应该点击并拖动<div>本身，而不是<select>。几乎所有像<textarea>这样的表单控件都以类似的方式阻塞。要对此进行测试，只需向<div>添加背景颜色或其他内容，然后将剩余区域拖到<select>的右侧。

但是用户不会意识到这个看不见的区域（如果有的话）。处理这种情况我们有handle选项：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

在演示中，单击并拖动用作句柄的蓝色框。

jQuery ui可拖动与<select>标签

2 个答案: