導入CSS和JS到PHP笨

所以，一切正常，在我的HTML導入CSS和JS到PHP笨

<style> 
    #draggable { width: 90px; height: 90px; } 
    #draggable2 { width: 90px; height: 90px; } 
    #draggable3 { width: 90px; height: 90px; } 
    #draggable4 { width: 90px; height: 90px; } 
    #draggable5 { width: 90px; height: 90px; } 
    #draggable6 { width: 90px; height: 90px; } 
    #draggable7 { width: 90px; height: 90px; } 
    #draggable8 { width: 90px; height: 90px; } 
    #draggable9 { width: 90px; height: 90px; } 
    #draggable10 { width: 90px; height: 90px; } 
</style> 
<script> 
    $(function() { 
     $("#draggable").draggable(); 
     $("#draggable2").draggable(); 
     $("#draggable3").draggable(); 
     $("#draggable4").draggable(); 
     $("#draggable5").draggable(); 
     $("#draggable6").draggable(); 
     $("#draggable7").draggable(); 
     $("#draggable8").draggable(); 
     $("#draggable9").draggable(); 
     $("#draggable10").draggable(); 
    }); 
</script>

這裏是正文：

<body> 
    <div id="draggable" class="ui-widget-content"> 
     <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a> 
    </div> <br> 
    <div id="draggable2" class="ui-widget-content"> 
     <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a> 
    </div> <br> 
    <div id="draggable3" class="ui-widget-content"> 
     <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a> 
    </div> <br> 
    <div id="draggable4" class="ui-widget-content"> 
     <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a> 
    </div> <br> 
    <div id="draggable5" class="ui-widget-content"> 
     <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a> 
    </div> <br> 
    <div id="draggable6" class="ui-widget-content"> 
     <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a> 
    </div> <br> 
    <div id="draggable7" class="ui-widget-content"> 
     <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a> 
    </div> <br> 
    <div id="draggable8" class="ui-widget-content"> 
     <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a> 
    </div> <br> 
    <div id="draggable9" class="ui-widget-content"> 
     <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a> 
    </div> <br> 
    <div id="draggable10" class="ui-widget-content"> 
     <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a> 
    </div> <br> 
</body>

我的問題是：如何做，在我的笨：

這是我在我的笨觀點：

<head> 
    <style> 
     #draggable { width: 90px; height: 90px; } 
     #draggable2 { width: 90px; height: 90px; } 
     #draggable3 { width: 90px; height: 90px; } 
     #draggable4 { width: 90px; height: 90px; } 
     #draggable5 { width: 90px; height: 90px; } 
     #draggable6 { width: 90px; height: 90px; } 
     #draggable7 { width: 90px; height: 90px; } 
     #draggable8 { width: 90px; height: 90px; } 
     #draggable9 { width: 90px; height: 90px; } 
     #draggable10 { width: 90px; height: 90px; } 
    </style> 

    <script> 
     $(function() { 
      $("#draggable").draggable(); 
      $("#draggable2").draggable(); 
      $("#draggable3").draggable(); 
      $("#draggable4").draggable(); 
      $("#draggable5").draggable(); 
      $("#draggable6").draggable(); 
      $("#draggable7").draggable(); 
      $("#draggable8").draggable(); 
      $("#draggable9").draggable(); 
      $("#draggable10").draggable(); 
     }); 
    </script></head> 

<body> 
<?php 
    if(is_array($posting)){ //This function is purposed to retrieve from Daabase 
    echo '<ol>'; 
    foreach($posting as $key){ 
    $judul = '<div id="draggable" class="ui-widget-content">'.$key->tbl_name.'</div>'; 
    echo $judul; 
    } 
    echo '</ol>'; 
}</body>

但現在它只適用於'可拖動'。如何做'draggable2' - 'draggable10'？

來源

2014-10-20 yogieputra

你必須給與增量ID喜歡

echo '<ol>'; 
$i = 1; 
foreach($posting as $key){ 
    $judul = '<div id="draggable'.$i++.'" class="ui-widget-content">'.$key->tbl_name.'</div>'; 
    echo $judul; 
}

而剛剛從

$("#draggable").draggable();

到

$("#draggable1").draggable();

來源

2014-10-20 05:32:50 Gautam3164

感謝隊友，它工作得很好:) – yogieputra 2014-10-20 06:43:53

draggable2改變第一draggable - draggable10不存在，因爲你只寫id =「draggable」試試這個

$i = 0; 
foreach($posting as $key){ 
$judul = '<div id="draggable'.$i.'" class="ui-widget-content">'.$key->tbl_name.'</div>'; 
echo $judul; 
$i++; }

//id="draggable'.$i.'" will create draggable2 whene $i=2

來源

2014-10-20 05:40:27 ron

導入CSS和JS到PHP笨

回答

相關問題