jQuery-ui: перетаскиваемый рабочий, но не изменяемый размер - PullRequest
Новая
       0

jQuery-ui: перетаскиваемый рабочий, но не изменяемый размер

0 голосов
/ 06 декабря 2018

Я пытаюсь сделать этот div одновременно перетаскиваемым и изменяемым, однако функция изменяемого размера не работает независимо от того, что я пытаюсь, но перетаскиваемая работает отлично.Div используется для загрузки флэш-карт пользователя, чтобы они могли просматривать их в видеочате.Вот HTML-код: 

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="ISO-8859-1"> 
    <title>Insert title here</title> 

    <script src="js/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script> 
    <script src="js/jquery-ui-1.12.1.custom/jquery-ui.js"></script> 
    <script> 
        $(document).ready(function() {               

            $("#flash-card-div").hide(); 

            $("#flash-card-bttn").button(); 
            $("#draw-tool-bttn").button(); 
            $("#document-view-bttn").button(); 

            $("#flash-card-bttn").click(function(event) { 
                $("#flash-card-div").show(); 
                $("#flash-card-div").load("/toolbarcardviewer") 
            }); 

            $(function() { 
                $("#flash-card-div").resizable().draggable(); 
            }); 
        }); 
    </script> 
    <style> 

    ul { 
        list-style-type: none; 
        margin: 0; 
        padding: 0; 
        overflow: hidden; 
        background-color: #f3f3f3; 
        border: 1px solid #e7e7e7; 
        width = 100%; 
    } 
    li { 
        float: left; 
    } 

    #flash-card-div { 
        width: 300px; 
        height: 300px; 
        padding: 0.5em; 
    } 

</style>
<link type="text/css" href="js/jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet">
</head> 



<body> 

    <div id="toolbar"> 
        <ul id="tools"> 
            <li> 
                <button id="flash-card-bttn">Flash Cards</button> 
            </li> 
            <li> 
                <button id="draw-tool-bttn">Draw Tool</button> 
            </li> 
            <li> 
                <button id="document-view-bttn">Documents</button> 
            </li> 
        </ul> 
    </div> 

    <div id="flash-card-div" class="ui-widget-content"> 
    </div> 
</body> 
</html>

Как мне заставить обе эти функции работать на этой странице?Я сделал что-то не так с привязкой таблицы стилей или что-то?

1 Ответ

0 голосов
/ 09 декабря 2018

Я не могу повторить проблему.Не ясно, какая версия jQuery используется, я предполагаю v1.12.4.Я протестировал v3.3.1 и, похоже, он работает правильно.

Я вижу, что вы используете загрузку пользовательского интерфейса jQuery, поэтому я хотел бы убедиться, что он включает виджет Resize. 

$(function() {

  $("#flash-card-div").hide();

  $("#flash-card-bttn").button();
  $("#draw-tool-bttn").button();
  $("#document-view-bttn").button();

  $("#flash-card-bttn").click(function(event) {
    $("#flash-card-div").show();
    $("#flash-card-div").load("/toolbarcardviewer")
  });

  $("#flash-card-div").resizable().draggable();
});
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f3f3f3;
  border: 1px solid #e7e7e7;
  width=100%;
}

li {
  float: left;
}

#flash-card-div {
  width: 300px;
  height: 300px;
  padding: 0.5em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.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 id="toolbar">
  <ul id="tools">
    <li>
      <button id="flash-card-bttn">Flash Cards</button>
    </li>
    <li>
      <button id="draw-tool-bttn">Draw Tool</button>
    </li>
    <li>
      <button id="document-view-bttn">Documents</button>
    </li>
  </ul>
</div>

<div id="flash-card-div" class="ui-widget-content">
</div>

Я нажимаю кнопку.Флэш-карта появляется.Я могу перетащить это.Я могу изменить его размер.

Если проблема не устранена, проверьте консоль на наличие ошибок.Прокомментируйте больше деталей, если узнаете больше.

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...