jqueryUI：可拖动句柄隐藏在 div 顶部

Question

这可能是一个错误，但我不知道我做错了什么。

我麻烦地制作了一个 JS Fiddle，遗憾的是它在那里表现得很好，但是如果你在 chrome 中本地获取确切的代码运行，jqUI手柄都位于元素的顶部而不是外边缘？这是 fiddle： https://jsfiddle.net/ceL1j3kL

为了理智起见，我在本地运行添加了此行为的屏幕图像。

有谁知道在动态创建要使用句柄的元素时如何将句柄保持在原位？

这是我正在使用的完整资源：

html

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="/style/chat.css" type="text/css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="/scripts/test.js"></script>
    </head>
    <body>
    </body>
</html>

css

html, 
body {
    height: 100%;
    overflow: hidden;
    margin:0;
    padding:0;
}

js

$(document).ready(function(){
    let c = $('<div id="container" style="width: 75%; height: 75%; background-color: black;">');
    c.appendTo($('body'));
    c.draggable({
        containment: 'body'
    });
    c.resizable({
        handles: 'all'
    });
});

image of the behavior i'm seeing when running locally. you can see i'm hovering in the image over the south handle, which is at the north of the element and is not clickable....

Answer 1

您必须在项目中添加 jquery-ui.css 引用，例如：

<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

jqueryUI：可拖动句柄隐藏在 div 顶部

jqueryUI: draggable handles are hidden at top of div

javascript

html

css

jquery-ui

jquery-ui-resizable