So, Everything works fine in my 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>
And here is the body:
<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>
My Question is: How to do that in my CodeIgniter:
This is my view in my 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>
But now it's only work for 'draggable' only. How to do it for 'draggable2' - 'draggable10'?
