Пользовательский интерфейс Jquery не может перетаскивать выделение - PullRequest
Новая
       8

Пользовательский интерфейс Jquery не может перетаскивать выделение

0 голосов
/ 22 октября 2019

Привет, у меня отключен выбор, и я хотел бы иметь возможность его перетаскивать. Даже поддельный выбор был бы хорош, если бы он выглядел как выбор. 

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

1 Ответ

1 голос
/ 23 октября 2019

Основной проблемой является всплеск события Click. Отключенный элемент Select приводит к тому, что событие Click никогда не достигает родительского элемента.

Чтобы устранить эту проблему, в вашей оболочке должно быть свободное пространство, чтобы пользователь мог щелкнуть элемент Div, чтобы они могли перетащить его.

Рабочий пример: 

$(function() {
  $(".draggable").draggable();
});
.draggable {
  padding: 7px;
  display: inline-block;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>

<div class="ui-widget">
  <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>
</div>

Кроме того, если вы используете jQuery Theming, вам нужно обернуть ui-widget-content внутри ui-widget для правильной активации.

Я бы посоветовал использовать дескриптор, если это возможно: 

<span class="ui-icon ui-icon-grip-dotted-vertical"></span>

С: 

$(".draggable").draggable({
  handle: ".ui-icon-grip-dotted-vertical"
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...