1

当多个可拖动对象被拖放到表单上时，我正在尝试设置表单值。一旦所有的可拖动对象都被删除，我想按下 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>

例如，我想将玩家 1 (pos_1) 拖到防御 1 并使表单值 r_def_1 = pos_1。

4

1 回答 1

1

我做了一些调整来让它工作：

我更新了 HTML 以使tds 可放置。这似乎工作得更好一点。我也适当地改变了 s的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了 droppable 的内部td。

CSS（可拖动它对限制width可拖动项目很有用）：

​<code>.player { 宽度：75px; }​</code>

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

于 2012-07-31T01:22:31.847 回答