不能同时使用可拖动、可调整大小和可选

我第一次尝试使用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>

，仅，可重新设定和可拖动的工作！可选的不！

可选的需要一个容器，如果您查看示例，它们使用<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交互作用。

希望会有所帮助。

相关内容

最新更新

热门标签：