トップページ -> 実践知識 -> JavaScript と JQueryUI による Web プログラミング -> JQuery UI を用いたドラッグ・ドロップ
[サイトマップへ], [サイト内検索へ],

JQuery UI を用いたドラッグ・ドロップ

サイト構成 連絡先,業績など 実践知識 データの扱い コンピュータ 教材 サポートページ

前もって決めておく事項


前準備


ドラッグ・ドロップのサンプルプログラム

  • dragdropsample.html.erb の作成

    ※ LINQ の機能を使わない場合には「<script type="text/javascript" src="Scripts/jquery.linq.js" type="text/javascript"<</script<」の行を 消しても構いません. (下のプログラムでは,LINQ の機能を使っていませんが,見本として使いたいので「この行」を付けています).

    
    <!DOCTYPE html public "-//w3c//dtd html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html LANG="ja" xmlns="http://www.w3.org/1999/xhtml">    
        <head>
    		<meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Windows-31J" />
    		<meta http-equiv="Content-Style-Type" content="text/css" />
    		<meta http-equiv="Content-Script-Type" content="text/javascript" />
    		<meta http-equiv="MSThemeCompatible" CONTENT="yes" />
    
    		<title>JQuery UI sample</title>
    
    		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet" />	
    		<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    		<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    		<script type="text/javascript" src="js/jquery.linq.min.js" type="text/javascript"></script>
    		<script type="text/javascript" src=//"maps.google.com/maps/api/js?sensor=false"></script>
    
            <script type="text/javascript">
        <!--
        $( function() {
            $("p").click( function() {
                alert("CLICK NOW!!");
            });
        });
        $( function() {
            $("#img1").draggable();
            $("#drop_point").droppable({
                drop: function(event, ui) {
                    alert("DROP HERE!!");
                }
            });
        });
        //-->        
            </script>
        </head>
    
        <body>
        <h1>Main#act3</h1>
            <script type="text/javascript">
            <!--
            document.write("Hello World!!");
            // -->
            </script>
            <br>
            <br>
            <p>
                Click Here!
            </p>
            <br>
            <br>
            <img src="/images/rails.png" id="img1">
            <div id="drop_point" style="height:500px; width:500px; background-color:#eeeeee; margin-top:10px; z-index:10;">
                <p>
                    DROP POINT
                </p>
            </div>
        </body>
    </html>
    
    

  • サーバの起動

    rails s
    

  • ためしに動作させてみる.

    ◆ 動作結果の例

    Web ブラウザで,http://localhost:3000/main/dragdropsample を開く