时间戳

首页 > 解决方案 > 我不明白为什么我的 div 不能调整大小？

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

问题描述

有人可以看看这段代码并解释为什么这个 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>

标签： javascripthtmljquerycssresizable

解决方案

为了完成这项工作，您还需要包含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>

推荐阅读