0

jQuery と jQuery UI について把握したいと考えています。このようなものはクールで、JavaScript の王様ではありませんが、その可能性を理解できるかもしれません。

このコードは、教育目的で手書きの HTML ファイルに記述しました。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>01 - jQuery UI Draggable Basic Example</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/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>
        .dragarea {
                height: 500px;
                width: 500px;
                background: grey;
        }

        #draggable {
                width: 100px;
                height: 100px;
                padding: 20px;
                background: #ccc;
                cursor: pointer;
        }
    </style>
    <script>
        $(document).ready(function() { $( "#draggable" ).draggable(); });
    </script>
</head>
<body>
    <div class="dragarea">
        <div id="draggable">Drag me</div>
    </div>
</body>
</html>

それでも、このjQuery UI Draggable Web サイトからコピーすると、正しく機能します。

また、 jQuery を使用して簡単なドラッグ アンド ドロップを作成する方法に関するこのチュートリアルと、その他の StackOverflow の Q/Aも多数読みました。

  1. jQuery UI のドラッグ可能機能が動作しない
  2. JQuery Draggable プラグインを動作させることができませんか?

ほんの数例を挙げると。

正しく動作しないというのは、画面上に 2 つの DIV セクションが正しいスタイルで表示され、ドラッグ可能な四角形をドラッグできず、テキストとページが選択されるだけであることを意味します。テキストをコピーしようとしています。これが画面上の結果です。

上記のコードの画面上の結果

コードの何が問題になっていますか? 誰か教えてください。

ご協力ありがとうございました！=)

4

1 に答える 1

3

スクリプト タグは自己終了ではありません。 

<script src="http://code.jquery.com/jquery-1.8.2.js" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" />

フィドル: 壊れた

する必要があります

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

フィドル: 固定

于 2012-11-21T19:25:08.957 に答える