Question

我第一次尝试使用Jquery-ui，并尝试创建具有上述标题中提到的所有3个功能的div。

您可以在此处找到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>

仅可调整大小和可拖动的作品！可选不！

Answer 1

Selectable需要一个容器，如果您查看examples，它们将使用<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>成为容器，现在所有UI交互都可以工作。

希望有帮助。

不能同时使用DRAGGABLE，RESIZEABLE和SELECTABLE

1 个答案: