我不明白为什么我的 div 不能调整大小？答案

【问题标题】：I can't understand why my div won't act resizable?我不明白为什么我的 div 不能调整大小？
【发布时间】：2020-05-26 03:51:36
【问题描述】：

有人可以看看这段代码并解释为什么这个 div 不可调整大小。我已经将代码剥离到了最简单的部分，寻找错误。一定有一些我不知道的明显的东西。

所需的功能： <div> 需要调整大小。它必须是用户可以用鼠标拖动以增加对象的宽度和高度的东西。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>

<body>

<style>
            .Work{
                position: relative;
                width: 100%;
                height: 10%;
                top: calc(12.5% + 1vh);
            }

            .object{
                position: absolute;
                height: 3.7vh;
                width: 12.75625vh;
                border: 3px solid #4286f41a;
                box-sizing: border-box;
                margin-left: 1.5vh;
                flex-shrink: 0;
            }
</style>



    <div class="Work">
        <div class="object"></div>
    </div>



      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <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>
          $(document).ready(function(){
            $(function(){
                $(".object").resizable();
                 });
         });
      </script>


</body>
</html>

【问题讨论】：

您的示例有一些语法错误。我会先解决这些问题。您还包括各种版本的 jQuery。
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 你忘记了 jqueryUI 的样式表

标签： javascript html jquery css resizable

【解决方案1】：

为了完成这项工作，您还需要包含jquery-ui.css。另外，不需要同时包含两个不同版本的jQuery，所以我只包含v3.5.1。

所以你的最终代码应该是这样的：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>

<body>

  <style>
    .Work {
      position: relative;
      width: 100%;
      height: 10%;
      top: calc(12.5% + 1vh);
    }
    
    .object {
      position: absolute;
      height: 3.7vh;
      width: 12.75625vh;
      border: 3px solid #4286f41a;
      box-sizing: border-box;
      margin-left: 1.5vh;
      flex-shrink: 0;
    }
  </style>



  <div class="Work">
    <div class="object"></div>
  </div>



  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>
    $(document).ready(function() {
      $(function() {
        $(".object").resizable();
      });
    });
  </script>


</body>

</html>

【讨论】：

奇怪的是，我的两个浏览器都不想允许该功能。我将它复制并粘贴到 WS3Schools 编辑器中，它运行良好。我无法理解。
我不知道，但谢谢。我现在知道，除了语法错误之外，问题出在其他地方。

【解决方案2】：

考虑下面的代码。

$(function() {
  $(".object").resizable();
});

.Work {
  position: relative;
  width: 100%;
  height: 10%;
  top: calc(12.5% + 1vh);
}

.object {
  position: absolute;
  height: 3.7vh;
  width: 12.75625vh;
  border: 3px solid #4286f41a;
  background-color: #ccc;
  box-sizing: border-box;
  margin-left: 1.5vh;
  flex-shrink: 0;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="Work">
  <div class="object">&nbsp;</div>
</div>

您有许多语法错误，并且缺少 jQuery UI CSS。更正后，代码按预期工作。

【讨论】：