Question

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

我怎样才能让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>

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

Answer 1

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

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

然后你可以将 draggable 和 resizable 元素合并为一个，并通过 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/

的实例

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

1 个答案: