Question

所以，我的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>

但是现在它只适用于“可拖动”＆＃39;只要。如何为＆＃39; draggable2＆＃39; - ＆＃39; draggable10＆＃39;？

Answer 1

draggable2 - draggable10不存在，因为你只写了id =＆＃34; draggable＆＃34; 试试这个

 $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

Answer 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();

将css和js导入PHP codeigniter

2 个答案: