jquery元素可拖动但不可调整大小

Question

感谢您花时间阅读我的问题。因此，我是使用jQuery的新手，我试图制作一个div并可以拖动并调整其大小。因此，我遵循了jQuery网站上的步骤。问题是，div只能拖动。我认为这可能是因为我组合了两个功能。然后，我只是尝试使其可调整大小，但仍然无法正常工作。因此，我在youtube视频后面删除了代码，但该div只能拖动，不能调整大小。如果我不得不猜测，问题不在于JavaScript，而是HTML或CSS。

这里是HTML：

<div id="htmlWrap">
    <div id="html" class="ui-widget-content">
        <div id="aheadWrap">
            <h2>Title</h2>
            <div id="htsub">Interesting subtitle</div>
            <div id="htlogoWrap"><img id="htlogo" src="https://cdn.pixabay.com/photo/2017/01/14/22/49/bison-1980589_960_720.png"></div>
        </div>
    </div>
</div>

这里是CSS

#html{
    width: 80%;
    position: absolute;
    top: 10px;
    left: 10px;
    border: 2px solid red;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    height: 80%;
    margin: 4px;
}

#htmlWrap{
    border: 5px solid black;
    position: absolute;
    top: 150px;
    margin-left: 340px;
    width: calc(100% - 360px);
    height: calc(100% - 180px);
    overflow-y: scroll;
    overflow-x: hidden;
}

这里是javascript

    $("#html").draggable({cursor:"move", containment: "#htmlWrap"});
    $("#html").resizable({handles: "n,s,e,w"});
});

并且如果我使用的链接会有所帮助

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

我不知道为什么它不起作用，因为我尽可能严格按照说明进行操作，并尝试调试了很长时间。认识我，我可能犯了一个简单的错误，但是我再次认为，我应用于它的样式可能会在根本问题中起作用。

再次感谢您阅读我的问题！

Answer 1

您丢失了jquery-ui“ css”文件，因此请将其包含在html文件中。 https://jsfiddle.net/sdebxwm0/5/

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css""/>

$("#html").draggable({cursor:"move", containment: "#htmlWrap"});  
  $("#html").resizable();

#html{
    width: 50%;
    position: absolute;   
    border: 2px solid red;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    height: 40%;
    margin: 4px;
}

#htmlWrap{
    border: 5px solid black;
    position: absolute;
    top: 10px;
    margin-left: 10px;
    width: calc(100% - 360px);
    height: calc(100% - 180px);
    overflow-y: scroll;
    overflow-x: hidden;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css""/>
<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>

 <div id="htmlWrap">
    <div id="html" class="ui-widget-content">
        <div id="aheadWrap">
            <h2>Title</h2>
            <div id="htsub">Interesting subtitle</div>
            <div id="htlogoWrap"><img id="htlogo" src="https://cdn.pixabay.com/photo/2017/01/14/22/49/bison-1980589_960_720.png"></div>
        </div>
    </div>
</div>