Я не могу понять, почему мой div не может изменять размер? - PullRequest
Новая
       19

Я не могу понять, почему мой div не может изменять размер?

0 голосов
/ 26 мая 2020

Кто-нибудь может взглянуть на этот код и объяснить, почему размер этого 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>

Ответы [ 2 ]

3 голосов
/ 26 мая 2020

Чтобы это работало, вам необходимо включить 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>
0 голосов
/ 26 мая 2020

Рассмотрим следующий код. 

$(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. После исправления код работает должным образом.

...