0
    無事に jQuery UI も使えるようになり、
    div要素もドラッグできるようになりました

    ジョルジュくん


    今回は、div をドラッグするために記述した内容について
    ちょっと説明したいと思います





    それでは、前回追加したところを振り返っていきます

    「HTML編集フォーム」内
    <script type="text/javascript" src="./template/js/cookie.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
    まずは、jQuery UI を使えるようにしました
    ※jQuery UI のバージョンを前回の記事 1.5.3 から最新の1.8.21 に変更しています

    「CSS編集フォーム」内
    #draggable {
        width: 150px; height: 150px; padding: 0.5em;
        border: 1px solid #999999;
    }
    これは、[draggable]という名前を付けて
    今回使用するdiv要素のスタイルを指定しています

    ブログの本文[HTMLモード]
    <div id="draggable">
        <p>Drag me around</p>
    </div>
    
    ここでは、本文にdiv要素を記述し、
    そのdivに対して、先ほどの[draggable]を使用しています

    ただしここまでは、div要素の形を作っただけなので、
    divをドラッグすることはできません

    「HTML編集フォーム」内
    <script type="text/javascript">
        $(function() {
            $( "#draggable" ).draggable();
        });
    </script>

    ここでようやく、jQuery UI を使用します
    最初に出てきた[#draggable]に対して、
    "draggable"という、jQuery UI を実行させます

    こうして、divをドラッグすることができるようになりました

    しかし、draggable という文字が2つ出てきてややこしいですね?
    そんな時は、最初に出てきた #draggable を別の名前に変更してあげるといいでしょう

    たとえば、#tesdrag と変更してみましょうか?

    「CSS編集フォーム」内
    #testdrag {
        width: 150px; height: 150px; padding: 0.5em;
        border: 1px solid #999999;
    }

    ブログの本文[HTMLモード]
    <div id="testdrag">
        <p>Drag me around</p>
    </div>
    

    「HTML編集フォーム」内
    <script type="text/javascript">
        $(function() {
            $( "#testdrag" ).draggable();
        });
    </script>

    「 [#testdrag]に "draggable" を適用して、div をドラッグできるようにします」
    こう見ると分かりやすいのではないでしょうか?


    ■ id(#) と class(.) の違い -----
    さて、jQuery UI から少しはなれまして...

    私、初心者ですので、CSS を扱っているといろいろ分からないこともでてきます

    そんな中、いろいろ調べていると要素に対してCSSを適用するときに、
    id」が使われたり「class」が使われたりしていることがありました

    「このidとclassの違いはなんだ?」

    と混乱してきたので調べてみました

    で、

    CSS で 「#」 として名前付けしたものは、「id」 で指定
    CSS で 「.」 として名前付けしたものは、「class」 で指定
    ということが分かりました

    今回は「#draggable」で名前付けしているので「id="draggable"」と指定しています
    なので、
    これを「.draggable」と名前付けて「class="draggable"」と指定してもしっかり動作します

    ...えっ?じゃ〜何!?どっちでもいいの?

    ってなりますよね、私もそこでスルーしそうになりました(危ない危ない)

    肝心の違いは、簡単に言うと

    id(#)は、一回しか呼べない(一個の要素にしか使えない)
    class(.)は、何回でも呼べる(複数の要素に使える)

    簡単に言えたのかどうか不安がありますので、
    実際に記述して見ましょう
    最初に記述した「#draggable」とならべて「.testdrag」について記述します

    「CSS編集フォーム」内
    #draggable {
        width: 150px; height: 150px; padding: 0.5em;
        border: 1px solid #999999;
    }
    .testdrag {
        width: 150px; height: 150px; padding: 0.5em;
        border: 1px solid #999999;
        background: #dddddd;
    }
    

    ブログの本文[HTMLモード]
    <div id="draggable">
        <p>一度目の id です<br>なのでドラッグできます</p>
    </div>
    <div id="draggable">
        <p>二度目の id です<br>二度目以降はドラッグできません</p>
    </div>
    <div class="testdrag">
        <p>一度目の class です<br>一度目はもちろんドラッグできます</p>
    </div>
    <div class="testdrag">
        <p>二度目の class です<br>二度目以降もドラッグできます</p>
    </div>
    
    divを「id」と「class」で二個ずつ並べます
    「id」の方は2個目は動かず、「class」の方は2個目も動く”はず”です


    「HTML編集フォーム」内
    <script type="text/javascript">
        $(function() {
            $( "#draggable" ).draggable();
            $( ".testdrag" ).draggable();
        });
    </script>
    忘れずに、jQuery UI !

    では、反応を見てみましょう...

    一度目の id です
    なのでドラッグできます

    二度目の id です
    二度目以降はドラッグできません

    一度目の class です
    一度目はもちろんドラッグできます

    二度目の class です
    二度目以降もドラッグできます


    どうですか?
    意図する動きができたでしょうか?

    ..

    「こんなの当たり前だ〜い!!」といわれるかもしれませんが、
    めげずに気づいたことを書いていきたいと思う今日この頃です



    【送料無料】jQueryクックブック

    【送料無料】jQueryクックブック
    価格:3,780円(税込、送料別)

    【送料無料】jQueryで作るAjaxアプリケーション

    【送料無料】jQueryで作るAjaxアプリケーション
    価格:2,919円(税込、送料別)


    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック

    Calendar
    S M T W T F S
    1234567
    891011121314
    15161718192021
    22232425262728
    293031    
    << October 2017 >>
    My Apps
    有料アプリ

    無料アプリ

    Selected entries
    Categories
    AdSense
    Sponsored Links
    Archives
    Recent comment
    Links
    Profile
    Search this site.
    Others
    Mobile
    qrcode
    powered
    無料ブログ作成サービス JUGEM