从QueryUI设置窗体值可拖动

Question

I'm trying to set a form value when mulitple draggable objects are dropped onto a form. Once all the draggables have been dropped, I want to press the submit for a PHP code to do some processing with the form values.

I just can't get the drop event to set the form value????

Here's the JqueryUI stuff..

$(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');
    }
});

});

Here is the 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>

So as an example, I want to drag Player 1 (pos_1) to Defence 1 and make the form value r_def_1 = pos_1.

Answer 1

I made a few tweaks to get this to work:

I updated the HTML to make the tds droppable. This seems to work a little bit better. I also changed the colspan attribute of the tds appropriately.

Updated 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);
        }
    });
});​

The key is this line:

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

which finds the input inside of the droppable td.

CSS (with draggable its useful to limit the width of draggable items):

​.player { width: 75px; }​

Example: http://jsfiddle.net/z8pWN/