将css和js导入PHP代码点火器


Import css and js to PHP codeigniter

所以,在我的HTML 中一切都很好

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

我的问题是:如何在我的CodeIgniter:中做到这一点

这是我在CodeIgniter:中的观点

<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"-"draggable 10"执行此操作?

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

您必须以类似的增量给出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" ).draggable();

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