5

我正在尝试在以下小提琴中实现效果：

http://jsfiddle.net/vrUgs/2/

检查我的 jsfiddle：http: //jsfiddle.net/H9kgP/

我怎样才能有一个既可拖动又可调整大小的 div？contenteditable="true" 的 div 不起作用，无法编辑。这里有什么问题？

来自Chris Moutray的Answer更新代码：

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

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

4

1 回答 1

3

首先你需要链接 jquery-ui 资源

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

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

HTML 

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

查询

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

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

这是您的代码http://jsfiddle.net/chrismoutray/H9kgP/2/的工作示例

于 2012-11-20T06:45:38.727 回答