0

ドラッグ アンド ドロップ機能は初めてです。大学の時間割申請書を作成する必要があります。これには、必要なすべての値を含む左側の教師の責任のリストからドラッグし、右側の時間割スロットにドロップしてから、部屋番号を尋ねるダイアログ ボックスが表示され、次に、php および mysql レベルでさまざまなチェックを実行し、最後にデータベースに挿入します。また、言うまでもなく、これは ajax ソリューションでなければなりません。

jqueryやprototypeなどのフレームワークではなく、これを純粋なjavascriptソリューションにしたいと本当に思っています。時間との競争があり、これまでフレームワークを使用したことがないため、これらのいずれかを学ぶ時間を割くことができません。しかし、皆さんが純粋な JavaScript で私を助けることができない場合は、上記のフレームワークのいずれかを使用する必要があります。

できるだけ早く助けてください。また、正確に何を達成したいのかについて、さらに説明が必要かどうか尋ねてください。

4

1 に答える 1

1

最初のオプションは次のとおりです。コア JavaScript では、HTML5 のドラッグ ドロップ機能を使用して使用できますが、Safari ブラウザでは特に問題があります。

2 番目のオプション: http://jqueryui.com/sortable/#connect-lists

次のコードを入力して、ajax の呼び出し方法を説明します。期待どおりの出力が得られるまで、私はまだあなたを助けるためにここにいます

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Sortable - Connect lists</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

    <style>
    #left, #right { border:1px solid #000000;min-height:100px;min-width:100px;list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
    #left li, #right li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
    </style>
    <script>
    $(function() {
        $( "#left, #right" ).sortable({
            connectWith: ".connectedSortable",
            receive: function(event,ui){
                 console.log("old ui id = "+ui.sender.attr("id")+" new ul id = "+this.id+" li id "+$(ui.item).attr("id"));                   
                 if(ui.sender.attr("id") != this.id)
                 {  
                    //Your ajax call will come here


                            $.ajax({
                    type: "POST",
                    url: "logic.php", 
         // Write you //php mysql logic here you'll get all your data in logic.php file 
                  data: { left: ui.sender.attr("id"), right: this.id , responsibility:$(ui.item).attr("id") }
                }).done(function( msg ) {
                              alert( "Data Saved: " + msg );
                            });
                 }
             }

        }).disableSelection();
    });
    </script>
</head>
<body>

<ul id="left" class="connectedSortable">
    <li id="1" class="ui-state-default">Item 1</li>
    <li id="2"  class="ui-state-default">Item 2</li>
    <li id="3"  class="ui-state-default">Item 3</li>
    <li id="4"  class="ui-state-default">Item 4</li>
    <li id="5"  class="ui-state-default">Item 5</li>
</ul>

<ul id="right" class="connectedSortable">
    <li id="6" class="ui-state-highlight">Item 1</li>
    <li id="7"  class="ui-state-highlight">Item 2</li>
    <li id="8"  class="ui-state-highlight">Item 3</li>
    <li id="9"  class="ui-state-highlight">Item 4</li>
    <li id="10"  class="ui-state-highlight">Item 5</li>
</ul>


</body>
</html>
于 2012-12-08T16:48:54.503 に答える