Question

我正在尝试使此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>

如何在此页面上同时使用这两个功能？我在链接样式表时是否做错了什么？

Answer 1

我无法复制该问题。目前尚不清楚使用哪个版本的jQuery，我假设使用v1.12.4。我使用v3.3.1进行了测试，它似乎可以正常工作。

我确实看到您正在使用自定义jQuery UI下载，所以我将确保它包含“调整大小”小部件。

$(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>

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

如果仍然有问题，请检查控制台是否有错误。如果您发现更多信息，请评论更多细节。

希望有帮助。

jQuery-ui：可拖动，但不可调整大小

1 个答案: