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

Question

谁能看看这段代码并解释为什么这个 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>

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

Answer 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。更正后，代码将按预期工作。

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

I can't understand why my div won't act resizable?

html

javascript

css

jquery

resizable