Jquery UI可拖拽和可调整大小不起作用。

Question

Jquery UI可拖拽和可调整大小不起作用。

5

我正在尝试在以下fiddle中实现效果：http://jsfiddle.net/vrUgs/2/。请查看我的jsfiddle：http://jsfiddle.net/H9kgP/。如何使一个div既可拖动又可调整大小？带有contenteditable="true"属性的div无法使用，无法编辑。问题出在哪里？这是Chris Moutray的答案的更新代码：

<!doctype html> 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI</title>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
    body{ }
    #container{ width: 980px; margin: 0 auto; }
    #background { background: red; width: 600px; height: 400px; margin: 0 auto; background-size: 600px 400px;}
    .draggable { width: 250px; height: 150px; padding: 0.5em; opacity: 0.5; color: #000; background: #f0f0f0; }
    </style>
    <script>
        $(document).ready(function() {
            $(".resizeable").resizable({
                containment: "#background"
            });

            $(".draggable").draggable({
                cursor: "crosshair",
                containment: "#background",
            });
        });

    </script>
</head>
<body>
<div id="container">
    <div id="background">
        <div class="draggable resizeable" style="display:inline-block">
                <div contenteditable="true" id="message">
                    Enter message..
                </div>
        </div>
    </div>
</div>
</body>
</html>

可拖动的部分正常工作，但水平调整大小不起作用。当我尝试增加水平大小时，它会自动变小，然后无法再次调整大小。可能的问题是什么？

- VishwaKumar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Moutray · Accepted Answer

首先，您需要链接jquery-ui资源。

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" />

然后，您可以将可拖动和可调整大小的元素合并为一个，用 class 来引用。

HTML

<div id="background">
    <div class="draggable resizeable" style="display:inline-block">
        <div contenteditable="true" id="message">
            Enter message..
        </div>
    </div>
</div>

JQUERY

$(".resizeable").resizable({
    containment: "#background"
});

$(".draggable").draggable({
    cursor: "crosshair",
    containment: "#background",
});

以下是您代码的一个可行示例：http://jsfiddle.net/chrismoutray/H9kgP/2/。