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

【问题标题】：jQuery-ui: Draggable working, but not resizeablejQuery-ui：可拖动的工作，但不可调整大小
【发布时间】：2018-12-06 20:44:27
【问题描述】：

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

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

【问题讨论】：

欢迎来到 Stack Overflow。首先，您不需要在$(document).ready() 语句中调用$(function(){})。使用一个或另一个，而不是两者。其次，由于可拖动和可调整大小都使用click 事件，因此创建可拖动句柄通常有助于确保单击事件不会混淆要执行的操作。

标签： javascript jquery html jquery-ui

【解决方案1】：

我无法重现该问题。目前尚不清楚正在使用什么版本的 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>

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

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

希望对您有所帮助。

【讨论】：