Невозможно использовать DRAGGABLE, RESIZEABLE & SELECTABLE одновременно - PullRequest
Новая
       7

Невозможно использовать DRAGGABLE, RESIZEABLE & SELECTABLE одновременно

0 голосов
/ 05 июля 2019

Я пытаюсь использовать Jquery-ui впервые и пытаюсь создать div со всеми 3 функциями, упомянутыми выше в заголовке.

Вы можете найти ссылку JSBin здесь: https://jsbin.com/haleyucipu/1/edit?html,output

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Resizable - Visual feedback</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
  #resizable { width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }
  .ui-selecting { background: #FECA40; }
  .ui-selected { background: #F39814; color: white; }
  .ui-resizable-ghost { border: 1px dotted gray; }
  </style>
  <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() {
    $( "#resizable" ).resizable({
      ghost: true,
      helper: "ui-resizable-helper",
      animate: true
    }).draggable().selectable();
  });

  </script>
</head>
<body>

  <div id="resizable" class="ui-widget-content"></div>

</body>
</html>

Только масштабируемая и перетаскиваемая работа! По выбору не!

1 Ответ

0 голосов
/ 05 июля 2019

Для выбора нужен контейнер, если вы посмотрите на примеры , они используют <ol>.

Рассмотрим следующий код: 

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Resizable - Visual feedback</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
    #resizable {
      width: 150px;
      height: 150px;
      padding: 0.5em;
    }
    
    #resizable h3 {
      text-align: center;
      margin: 0;
    }
    
    .ui-selecting {
      background: #FECA40;
      opacity: .65;
    }
    
    .ui-selected {
      background: #F39814;
      color: white;
    }
    
    .ui-resizable-ghost {
      border: 1px dotted gray;
    }
  </style>
  <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() {
      $("#resizable").resizable({
        ghost: true,
        helper: "ui-resizable-helper",
        animate: true
      }).draggable().parent().selectable();
    });
  </script>
</head>

<body>
  <div id="resizable" class="ui-widget-content"></div>
</body>

</html>

Это делает <body> контейнером, и теперь все взаимодействия с пользовательским интерфейсом работают.

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...