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" />

次に、ドラッグ可能でサイズ変更可能な要素を 1 つにマージし、代わりにクラスで参照することができます。

HTML 

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

Jクエリ

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

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

コードの実際の例を次に示しますhttp://jsfiddle.net/chrismoutray/H9kgP/2/

于 2012-11-20T06:45:38.727 に答える