Draggable Droppable for image positioning under various groups

View
  <?php
$baseUrl = Yii::app()->baseUrl;
$cs = Yii::app()->getClientScript();
$cs->registerScriptFile($baseUrl.'/css/jquery-ui.js');
?>
 
  <?php
  Yii::app()->clientScript->registerCoreScript('jquery');
  $HotelAreas = HotelArea::model()->findAll();
foreach($HotelAreas as $HotelArea){
$Tables = Table::model()->findAll('is_active = 1 AND place='.$HotelArea->id);
foreach($Tables as $Table){
?>

  <script>
  $(function() {
left=0;
top=0;
    $("#<?php echo $Table->id?>").draggable();
$( "#droppable-<?php echo $HotelArea->id ?>").droppable({


      drop: function( event, ui ) {
       //alert(ui.draggable.prop('id'));
  event.stopPropagation();
var left = ui.position.left;
var dropPositionY = event.pageY - $(this).offset().top;
var dragItemOffsetY = event.offsetY;
var top =ui.position.top;
var droppableId = $(this).attr("id");
           $.ajax({
   
 url: "<?php echo Yii::app()->createAbsoluteUrl('Table/UpdatePosition');?>",
 type:"POST",
 data: "id="+ui.draggable.prop('id')+"&left=" + left+"&top=" + top+"&droppableId=" + droppableId,
 //dataType:"json",
 success: function(responce)

 {
 //alert(responce);

 }

});
           
      }
    });

  });
 
  </script>
  <?php
  }
  }
  ?>
<div class="span12">

<div class='fulid-row'>

<?php
$a_id = Yii::app() -> controller -> action -> id;
$c_id = Yii::app() -> controller -> id;
?>
<div id="content-box">
<div id="element-box">
<div id="system-message-container"></div>
<div class="">
<div class="adminform">

<?php $this->renderPartial('_left_menu'); ?>
<div class="span10">
<div class="headerContent">
<h3 style="padding: 5px;">Manage Tables</h3>
<!-- <h1 style="font-style: italic; margin: 25px 0px 0px -408px;">Manage Menu Items</h1> -->

</div>
<div class="space"></div>

</div>

<div class="span10" style="">
<div class="cpanel-right right-side">
<div style="margin-left: 20px;float: left;">
<?php
$HotelAreas = HotelArea::model()->findAll();
foreach($HotelAreas as $HotelArea){

$Tables = Table::model()->findAll('is_active = 1 AND place='.$HotelArea->id);


foreach($Tables as $Table){
$sql="SELECT image from table_type_images where table_type_id =".$Table->shape." AND chairs = ".$Table->chairs;
$TableTypeImage = TableTypeImages::model()->findBySql($sql);
if($Table->position==""|| $Table->position==Null){
$style="width:110px;margin-left: 20px;";
echo '<div id='.$Table->id.' style='.$style.'>';
}
elseif($Table->position!=""|| $Table->position!=Null){
$position=$Table->position;
$position=explode(",",$position);
$left=$position[0].'px';
$top=$position[1].'px';
$style="width:110px;left:$left;top:$top;";
echo '<div id='.$Table->id.' style='.$style.'>';
}
echo CHtml::image(Yii::app()->getBaseUrl().'/images/tables/'.$TableTypeImage->image, 'Tables[]');
echo '</div>';


}


}

?>
</div>
<div style="margin-left: 200px;">
<?php
$HotelAreas = HotelArea::model()->findAll();
foreach($HotelAreas as $HotelArea){

echo '<div id="droppable-'.$HotelArea->id.'" style="border: 3px solid #f90;border-radius: 1em;width:1000px;height:300px;">'.$HotelArea->name.
'</div>';

}
?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


Controller
public function actionUpdatePosition(){
$left= $_POST['left'];
$top = $_POST['top'];
$id = $_POST['id'];
$droppableId = $_POST['droppableId'];
$droppableId=explode('-',$droppableId);
$Table = new Table;
$Table->updatePosition($left,$top,$id,$droppableId[1]);
//echo $top.",".$left;

}

Model
public function updatePosition($left=null,$top=null,$id=null,$droppableId=null)
{

$position =$left.",".$top;

$sql = "UPDATE `table` SET `position`='$position',`place`=$droppableId WHERE id=:id";

$parameters = array(":id"=>$id);

Yii::app()->db->createCommand($sql)->execute($parameters);

}