1

データベースから関連データが取り込まれる、単純なタブ付きの JQuery ドラッグ アンド ドロップ システムを作成しました。

http://ignitethatdesign.com/phoneShop/test1.php

私の主な目標は、電話契約を選択するときに必要なさまざまな要素 (電話の価格、ネットワーク コスト、その他の変数など) を [最終パッケージ] タブにドラッグ アンド ドロップすることにより、単純な電話パッケージ システムを最終的に作成することです。ユーザーが送信したときにかかる費用の総計。

「最終パッケージ」タブに移動するために、各タブから 1 つのオプションのみを選択したい。

メーカー: Nokia Lumia 800。分数: 100。

私の問題は、各タブからオプションを 1 つだけ取得して「最終パッケージ」に入れたい場合に、各タブから任意のタブにできるだけ多くのオプションをドラッグできることです。

<style>
    #sortable1 li, #sortable2 li, #sortable3 li, #sortable4 li { margin: 0 5px 5px     5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>

<script>
$(function() {
    $( "#sortable1, #sortable2, #sortable3, #sortable4, #sortable5" ).sortable().disableSelection();

    var $tabs = $( "#tabs" ).tabs();

    var $tab_items = $( "ul:first li", $tabs ).droppable({
        accept: ".connectedSortable li",
        hoverClass: "ui-state-hover",
        drop: function( event, ui ) {
            var $item = $( this );
            var $list = $( $item.find( "a" ).attr( "href" ) )
                .find( ".connectedSortable" );

            ui.draggable.hide( "slow", function() {
                $tabs.tabs( "select", $tab_items.index( $item ) );
                $( this ).appendTo( $list ).show( "slow" );
            });
        }
    });
});
</script>
</head>

<body>
<div class="dragDrop">
 <?php

 mysql_connect("localhost", "user", "password") or die ('Unable to Connect MySQL');
 mysql_select_db("database") or die ('Unable to select Database'); 
 ?>

<div id="tabs">
<ul>
    <li><a href="#Models">Make</a></li>
    <li><a href="#Minutes">Minutes</a></li>
    <li><a href="#Texts">Texts</a></li>
    <li><a href="#Data">Data</a></li>
    <li><a href="#tabs-2">Final Package</a></li>
</ul>
<div id="Models">
    <ul id="sortable1" class="connectedSortable ui-helper-reset">
    <?php
    $result = mysql_query("SELECT * FROM phone_tbl where category = 'Model'") or     die(mysql_error());
 while($row = mysql_fetch_array($result)) { 
 echo "<li id=\"item_=".$row['id']."\"><div>".$row['label']."</div></li>";
 }
?>
    </ul>
</div>

<div id="Minutes">
    <ul id="sortable2" class="connectedSortable ui-helper-reset">
    <?php
    $result = mysql_query("SELECT * FROM phone_tbl where category = 'Minutes'") or     die(mysql_error());
 while($row = mysql_fetch_array($result)) { 
 echo "<li id=\"item_=".$row['id']."\"><div>".$row['label']."</div></li>";
 }
?>
    </ul>
</div>

<div id="Texts">
    <ul id="sortable3" class="connectedSortable ui-helper-reset">
    <?php
    $result = mysql_query("SELECT * FROM phone_tbl where category = 'Texts'") or     die(mysql_error());
 while($row = mysql_fetch_array($result)) { 
 echo "<li id=\"item_=".$row['id']."\"><div>".$row['label']."</div></li>";
 }
?>
    </ul>
</div>

<div id="Data">
    <ul id="sortable4" class="connectedSortable ui-helper-reset">
    <?php
    $result = mysql_query("SELECT * FROM phone_tbl where category = 'Data'") or die(mysql_error());
 while($row = mysql_fetch_array($result)) { 
 echo "<li id=\"item_=".$row['id']."\"><div>".$row['label']."</div></li>";
 }
?>
    </ul>
</div>
<div id="tabs-2">
    <ul id="sortable5" class="connectedSortable ui-helper-reset">
    </ul>
</div>
</div>

</div>

最終テーブルに追加される各オプションをどのように検証すれば、各タブから 1 つのオプションが「最終パッケージ」タブに追加された後、それ以上追加できなくなります。

ありがとう。

JB。

4

0 に答える 0