Question

我想在点击时将jQuery可拖动div带到前面。我读了this post，并在这里建立了JsFiddle，但它没有用。我错过了什么吗？谢谢！

这是我创建的jsfiddle，元素是可拖动的，并且在拖动时将被带到前面，但是我只是在被点击时无法将它们带到前面。 z-index之间是否存在冲突？ JSfiddle

这是代码： HTML

<div>
<div id="box1" class="front-on-click"></div>
<div id="box2" class="front-on-click"></div>
<div id="box3" class="front-on-click"></div>
<div id="box4" class="front-on-click"></div>

这是javascript：

$(document).ready(function() {
$('#box1,#box2,#box3,#box4').draggable({stack: "div"});
$('.front-on-click').click(function(){
   $('.front').removeClass('front');
   $(this).addClass('front');
});

});

谢谢！

Answer 1

我无法弄清楚它为什么不能正常工作，但我通过以下方式更改您的代码来实现它 -

$('.front-on-click').click(function() {
    $('.front').css('z-index','0').removeClass('front');
    $(this).addClass('front').css('z-index','100');
});

Answer 2

使用此

 $result = mysql_query("SELECT * FROM Acc_skills INNER JOIN Accounts ON Accounts.Role_ID = Acc_skills.FK_Role_ID INNER JOIN Skills ON Skills.Skills_id = Acc_skills.FK_Skills_ID ORDER BY Skills.Skills");

 while ($row =mysql_fetch_array($result)){
        echo'   <b><font color="blue">'.$row['Skills'].' &nbsp (Skill ID:&nbsp'.$row['Skills_id'].')</font></b>';
        echo'
    <style>table, th, td {border: 1px solid black;}</style>
    <div class="table-responsive">
        <table width="60%">
        <thead>
        <tr>
        <th width = "20%" >Engineer assign ID</th>
        <th style="text-align:center" width = "40%">Engineer</th>
        <th style="text-align:center" = "40%">Skill Level</th>
        <th> </th>

        </tr>
        </thead>';

        echo '<tbody>
      <tr>

        <th scope="row" style="text-align:center">'.$row['Acc_skills_id'].'</th>
        <td align="center">'.$row['name'].' &nbsp('.$row['FK_Role_ID'].')</td>
        <td align="center">'.$row['Level'].'</td>
        </td>


    </tr>


    </tbody>';


echo '</table><br><br>';    
echo '</div>';

点击时如何将可拖动的div带到前面？

2 个答案: