Css Jquery UI无法拖动选择_Css_Jquery Ui

Css Jquery UI无法拖动选择

css jquery-ui

Css Jquery UI无法拖动选择,css,jquery-ui,Css,Jquery Ui,嗨，我有一个禁用的选择，我想能够拖动它。即使是一个假的选择也很好，只要它看起来像一个选择 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial- scale=1">

嗨，我有一个禁用的选择，我想能够拖动它。即使是一个假的选择也很好，只要它看起来像一个选择

<!doctype html>
 <html lang="en">
     <head>
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial- 
           scale=1">
           <title>jQuery UI Droppable - Default functionality</title>  

           <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
           <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"> </script>
           <script>
                  $( function() {
                         $( ".draggable" ).draggable();   
                  } );
           </script>
     </head>
     <body>
          <div class="ui-widget-content draggable">
              <select disabled>
                  <option value="">Cannot be dragged</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
              </select>
          </div>
          <div>
              <span class="ui-widget-content draggable">Can be dragged </span>
          </div>
      </body>
</html>


jQuery UI可拖放-默认功能
$（函数（）{
$（“.draggable”）.draggable（）；
} );
不能拖动
一
二
三
可以拖动

主要问题是单击事件的冒泡。禁用的Select元素导致单击事件永远不会到达父元素

为了解决这个问题，包装器需要有一些空白，以便用户能够单击Div，从而可以拖动它

工作示例：

$（函数（）{
$（“.draggable”）.draggable（）；
});
.draggable{
填充：7px；
显示：内联块；
}

不能拖动
一
二
三
可以拖动
我找不到javascript解决方案。我使用css创建了一个div，并将位置设置为绝对，然后用它覆盖select。div不会接受被select吞没的单击
<!doctype html>
 <html lang="en">
     <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial- 
            scale=1">
            <title>jQuery UI Droppable - Default functionality</title>  

            <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
            <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"> </script>
            <script>
                  $( function() {
                         $( ".draggable" ).draggable();   
                  } );
            </script>
            <style>
                .draggable 
                {                   
                    display: inline-block;
                }
                .draggable-input-workaround
                {
                    background-color:transparent;
                    width:100%;
                    height:100%;
                    position:absolute;
                }
            </style>

     </head>
     <body>
          <div class="ui-widget-content draggable" style="border-style:solid" >
            <div class='draggable-input-workaround'>

            </div>
              <select disabled>
                  <option value="">Cannot be dragged</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
              </select>
          </div>
          <div>
              <span class="ui-widget-content draggable">Can be dragged </span>
          </div>
      </body>
</html>


jQuery UI可拖放-默认功能
$（函数（）{
$（“.draggable”）.draggable（）；
} );
.拖拉
{                   
显示：内联块；
}
.可拖动输入解决方案
{
背景色：透明；
宽度：100%；
身高：100%；
位置：绝对位置；
}
不能拖动
一
二
三
可以拖动
由于您的问题不清楚，您正在寻找类似的内容。请将代码复制到html文件中，然后在chrome中打开它。请注意，“可以拖动”可以拖动，而“”不能拖动。我如何才能拖动选择（整个选择，没有更多）？谢谢你的回答，我知道手柄，但我需要拖动选择。