Question

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

我遇到了制作JS Fiddle的麻烦，遗憾的是它在那里表现得很好，但是如果你采用确切的代码并在chrome中本地运行它，那么jqUI句柄都位于元素的顶部而不是外缘？这是小提琴： 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'
    });
});

我在本地运行时看到的行为的图像。你可以看到我徘徊在南手柄上的图像上，南手柄位于元素的北边，不可点击....

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：draggable句柄隐藏在div

1 个答案: