Question

我正在尝试在多个可拖动对象放到表单上时设置表单值。删除所有可拖动的后，我想按下提交的PHP代码，用表单值进行一些处理。

我无法获取drop事件来设置表单值????

这是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。

Answer 1

我做了一些调整才能让它发挥作用：

我更新了HTML以使td s droppable。这看起来好一点。我还适当地更改了colspan的{{1}}属性。

更新了HTML

td

<强> JavaScript的：

<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>

关键是这一行：

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

在droppable $("input", this).val(playerid);内找到input。

CSS（可拖动它可用于限制可拖动项目的td）：

width

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

从QueryUI设置窗体值可拖动

1 个答案: