1

複数のドラッグ可能なオブジェクトがフォームにドロップされたときに、フォームの値を設定しようとしています。すべてのドラッグ可能オブジェクトが削除されたら、PHPコードの送信を押して、フォーム値を処理します。

ドロップイベントを取得してフォーム値を設定できませんか????

これがJqueryUIのものです。

$(function() {
$( ".player" ).draggable({ revert: "invalid" });

$( ".position" ).droppable({
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    accept:".player",

    drop: function( event, ui ) {
        var playerid = ui.draggable.attr("id");
        var target = $(this).attr("id");

        alert(playerid); //this works - got the right draggable id
        alert(target); //this works - got the right droppable id

                       //!!!! THIS DOESN'T SET IT!!!!!
        $('#resultform').attr('#target','playerid');
    }
});

});

これがHTMLです

<div id="result_space">
            <div id="player_list" class="player_list">
            <p>This is the player space </p>
             <div id="pos_1" class="player">
                        <p>Player 1</p>
             </div>
             <div id="pos_2" class="player">
                        <p>Player 2 </p>
             </div>
 </div>

 <div id="pitch">
       <form id="resultform" name="resultform" action="results_submit.php" method="post">
 <table background="../_images/5_results/pitch_v2.jpg" width="560" border="1px">
   <tr height="30"> <td colspan="4" align="center" style="color: #FFFF00; font-size: 24px;">stowupland falcons fc</td></tr>

   <tr height="80" valign="bottom"><td colspan="4" align="center"><div class="position" id="goalie"> <input type="text" name="goalie" id="goalie" value="Player 1" /></div></td></tr>
    <tr height="110" align="center" valign="middle">
      <td width="25%"><div id="defence1"><input class="position" type="text" name="r_def_1" id="r_def_1" value="player 2" /></div></td>
      <td width="25%"><div class="position" id="defence2"><input type="hidden" name="r_def_2" id="r_def_2" value="player 3" /></div></td>
</table>

    <input name="submit" type="submit" id="submit" value="Submit" />

  </form>
 </div>
 </div>

例として、Player 1（pos_1）をDefense 1にドラッグし、フォーム値をr_def_1=pos_1にします。

4

1 に答える 1

1

これを機能させるために、いくつかの調整を行いました。

HTMLを更新して、tdsをドロップ可能にしました。これは少しうまくいくようです。colspanの属性もtd適切に変更しました。

更新されたHTML：

<div id="result_space">
    <div id="player_list" class="player_list">
        <p>This is the player space </p>
        <div id="pos_1" class="player">
            <p>Player 1</p>
        </div>
        <div id="pos_2" class="player">
            <p>Player 2 </p>
        </div>
    </div>
    <div id="pitch">
        <form id="resultform" name="resultform" action="results_submit.php" method="post">
            <table background="../_images/5_results/pitch_v2.jpg" width="560" border="1px">
                <tbody>
                    <tr height="30">
                        <td colspan="2" align="center" style="color: #FFFF00; font-size: 24px;" class="">stowupland falcons fc</td>
                    </tr>
                    <tr height="80" valign="bottom">
                        <td colspan="2" align="center" class="position">
                            <div class="" id="goalie"> 
                                <input type="hidden" name="goalie" id="goalie" value="Player 1" />
                            </div>
                        </td>
                    </tr>
                    <tr height="110" align="center" valign="middle">
                        <td class="position">
                            <div id="defence1">
                                <input class="" type="hidden" name="r_def_1" id="r_def_1" value="player 2" />
                            </div>
                        </td>
                        <td class="position">
                            <div class="" id="defence2">
                                <input type="hidden" name="r_def_2" id="r_def_2" value="player 3" />
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <input name="submit" type="submit" id="submit" value="Submit" />
        </form>
    </div>
</div>

JavaScript：

$(function() {
    $(".player").draggable({
        revert: "invalid"
    });

    $(".position").droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        accept: ".player",

        drop: function(event, ui) {
            var playerid = ui.draggable.attr("id");

            $("input", this).val(playerid);
        }
    });
});​

重要なのは次の行です。

$("input", this).val(playerid);

inputドロップ可能なの内部を見つけtdます。

CSS（ドラッグ可能widthでドラッグ可能なアイテムの制限に役立ちます）：

<code> .player {幅：75px; } </ code>

例： http： //jsfiddle.net/z8pWN/

于 2012-07-31T01:22:31.847 に答える