时间戳

首页 > 解决方案 > jQuery-ui：可拖动的工作，但不可调整大小

javascript - jQuery-ui：可拖动的工作，但不可调整大小

问题描述

我试图使这个 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>

如何使这两个功能在此页面上工作？我在链接样式表时做错了什么吗？

标签： javascriptjqueryhtmljquery-ui

解决方案

我无法复制这个问题。目前尚不清楚正在使用什么版本的 jQuery，我假设是 v1.12.4。我用 v3.3.1 测试过，它似乎工作正常。

我确实看到您正在使用自定义 jQuery UI 下载，所以我会确保它包含 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>

我点击按钮。闪存卡出现。我可以拖动它。我可以调整它的大小。

如果您仍有问题，请检查您的控制台是否有错误。如果您了解更多信息，请在评论中提供更多详细信息。

希望有帮助。

推荐阅读