Showing posts with label Create parking using jquery ui draggable and droppable. Show all posts
Showing posts with label Create parking using jquery ui draggable and droppable. Show all posts

Saturday 16 September 2017

Create parking using jquery ui draggable and droppable

Create parking using jquery ui draggable and droppable

Create parking using jquery ui draggable and droppable


<!doctype html>
<html lang="en">
<head>
<title>Society Parking</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="parking.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<script type="application/javascript">
$( init );

function init() {



// Ajax Loader
$(document).bind("ajaxStart.mine", function() {

$('.se-pre-con').css("display","block");
});

$(document).bind("ajaxStop.mine", function() {

$('.se-pre-con').css("display","none");
});
// End Ajax Loader

// User draggable event
$(".ui-draggable").draggable({ cursor: "crosshair", revert: "invalid"});



// User droppable event
$("#cardSlots div").droppable({ accept: ".ui-draggable",
           drop: function(event, ui) {
var dropped = ui.draggable;
var droppedOn = $(this);
          

    if($( this ).hasClass('over')==false){
$(".ui-draggable").draggable({ cursor: "crosshair", revert: "invalid"}); // drop element can drag it
$(this).addClass("over"); // drop box add over class

// this code remove prvious element (last drop element data)
if($(ui.draggable).attr('previousid')!=undefined){

var previousid  = "#"+$(ui.draggable).attr('previousid');

$(previousid).removeClass("over");
 
var member = $(ui.draggable).attr('data-userid');
var flat = $(ui.draggable).attr('data-flat');
var hidden_blockid = $(ui.draggable).attr('data-block');
var hidden_parkind =  $(previousid).attr('data-parkid');
var left_p = $(ui.draggable).css('left');
var top_p = $(ui.draggable).css('top');
//alert(top_p);
var flag = "1";




/*$.ajax({
url:"",
type:"POST",
data:{member:member,flat:flat,hidden_blockid:hidden_blockid,hidden_parkind:hidden_parkind,left_p:left_p,top_p,top_p,flag:flag},
success: function(res){
var t = $.parseJSON(res);
//alert(t['message']);

}
});*/
 
}
// Ends


// this for delete previous element data
var ids =  $(this).attr('id'); // get id
$(ui.draggable).attr('previousid',ids); // set id

     ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } ); 

  // this code insert current parking element

var member = $(ui.draggable).attr('data-userid');
  var flat = $(ui.draggable).attr('data-flat');
  var hidden_blockid = $(ui.draggable).attr('data-block');
  var hidden_parkind =  $(this).attr('data-parkid');
  var left_p = $(ui.draggable).css('left');
   var top_p = $(ui.draggable).css('top');
var park_drop = ids;
  
/*$.ajax({
url:"",
type:"POST",
data:{member:member,flat:flat,hidden_blockid:hidden_blockid,hidden_parkind:hidden_parkind,left_p:left_p,top_p,top_p,park_drop:park_drop},
success: function(res){
var t = $.parseJSON(res);
//alert(t['message']);

}

});*/
//ends




}else{

$(".ui-draggable").draggable({ cursor: "crosshair", revert: true});

$("#cardPile").droppable({ accept: ".ui-draggable", drop: function(event, ui) {
console.log("drop");

var dropped = ui.draggable;
var droppedOn = $(this);
//$(dropped).detach().css("position","relative").appendTo(droppedOn);     
$(dropped).removeAttr('style');
$(dropped).css("position","relative");
var imageUrl = $(dropped).attr('data-image');
$(dropped).css('background-image', 'url(' + imageUrl + ')');
$(dropped).css(' background-repeat', 'no-repeat');
$(dropped).css('background-size', '55px 86px');
var left_posion =  $(this).attr('data-left_pos');
   var top_posion =  $(this).attr('data-top_pos');
  
   if(left_posion!=''&&top_posion!=''){
    $(this).css('left', left_posion);
$(this).css('top', top_posion);
  }
 
 
if($(ui.draggable).attr('previousid')!=undefined){

var previousid  = "#"+$(ui.draggable).attr('previousid');

$(previousid).removeClass("over");

var member = $(ui.draggable).attr('data-userid');
var flat = $(ui.draggable).attr('data-flat');
var hidden_blockid = $(ui.draggable).attr('data-block');
var hidden_parkind =  $(previousid).attr('data-parkid');
var left_p = $(ui.draggable).css('left');
var top_p = $(ui.draggable).css('top');
//alert(top_p);
var flag = "1";




/*$.ajax({
url:"",
type:"POST",
data:{member:member,flat:flat,hidden_blockid:hidden_blockid,hidden_parkind:hidden_parkind,left_p:left_p,top_p,top_p,flag:flag},
success: function(res){
var t = $.parseJSON(res);
//alert(t['message']);

}
});*/

}


},


});

}
           
            
                },
over: function(event, ui) {},

                  out: function(event, ui) {}
                     });

// this code after set data in parking the goto prvious position (set for user display list)
$("#cardPile").droppable({ accept: ".ui-draggable", drop: function(event, ui) {
console.log('drop sucess');

var dropped = ui.draggable;
var droppedOn = $(this);

$(dropped).removeAttr('style');

$(dropped).css("position","relative");

var imageUrl = $(dropped).attr('data-image');
$(dropped).css('background-image', 'url(' + imageUrl + ')');
$(dropped).css(' background-repeat', 'no-repeat');
$(dropped).css('background-size', '55px 86px');

if($(ui.draggable).attr('previousid')!=undefined){

var previousid  = "#"+$(ui.draggable).attr('previousid');

$(previousid).removeClass("over");

var member = $(ui.draggable).attr('data-userid');
var flat = $(ui.draggable).attr('data-flat');
var hidden_blockid = $(ui.draggable).attr('data-block');
var hidden_parkind =  $(previousid).attr('data-parkid');
var left_p = $(ui.draggable).css('left');
var top_p = $(ui.draggable).css('top');
//alert(top_p);
var flag = "1";




/*$.ajax({
url:"",
type:"POST",
data:{member:member,flat:flat,hidden_blockid:hidden_blockid,hidden_parkind:hidden_parkind,left_p:left_p,top_p,top_p,flag:flag},
success: function(res){
var t = $.parseJSON(res);
//alert(t['message']);

}
});*/

}

$(ui.draggable).removeAttr('previousid');



}


});

// set background image to all userlist box
$(".profileimg").each(function(index, element) {
var imageUrl =   $(this).attr('data-image');
$(this).css('background-image', 'url(' + imageUrl + ')');
$(this).css(' background-repeat', 'no-repeat');
$(this).css('background-size', '55px 86px');

var left_posion =  $(this).attr('data-left_pos');
var top_posion =  $(this).attr('data-top_pos');

if(left_posion!=''&&top_posion!=''){
$(this).css('left', left_posion);
$(this).css('top', top_posion);
}
            });



}
</script>
<div id="loader" class="se-pre-con"></div>
<div id="wrapper">


       


  <div id="cardPile">
        <div  data-left_pos="" data-top_pos="" data-userid="11" data-flat="1" data-block="1" id="card11" data-image="thumb_59b7e0eeb0b6125-dsc-4806-copy-1490189640.jpg" class="ui-draggable profileimg"> </div>
        <div previousid=droppable24 data-left_pos="192px" data-top_pos="236px" data-userid="17" data-flat="1" data-block="1" id="card17" data-image="thumb_59b7e135e97524331AD0C00000578-4784672-image-m-2_1502551607375.jpg" class="ui-draggable profileimg"> </div>
        <div previousid=droppable23 data-left_pos="56px" data-top_pos="236px" data-userid="18" data-flat="1" data-block="1" id="card18" data-image="thumb_59b7e0175dc18Salman-Khan_55.jpg" class="ui-draggable profileimg"> </div>
      </div>
  <div id="cardSlots" style="width:910px;">
        <div  class="ui-droppable cardSlots " id="droppable6" data-parkid="6"   >a1011</div>
        <div  class="ui-droppable cardSlots " id="droppable7" data-parkid="7"   >a101</div>
        <div  class="ui-droppable cardSlots " id="droppable8" data-parkid="8"   >708</div>
        <div  class="ui-droppable cardSlots " id="droppable10" data-parkid="10"   >701</div>
        <div  class="ui-droppable cardSlots " id="droppable11" data-parkid="11"   >702</div>
        <div  class="ui-droppable cardSlots " id="droppable12" data-parkid="12"   >703</div>
        <div  class="ui-droppable cardSlots " id="droppable13" data-parkid="13"   >704</div>
        <div  class="ui-droppable cardSlots " id="droppable14" data-parkid="14"   >705</div>
        <div  class="ui-droppable cardSlots " id="droppable15" data-parkid="15"   >706</div>
        <div  class="ui-droppable cardSlots " id="droppable16" data-parkid="16"   >7014</div>
        <div  class="ui-droppable cardSlots " id="droppable17" data-parkid="17"   >707</div>
        <div  class="ui-droppable cardSlots " id="droppable18" data-parkid="18"   >709</div>
        <div  class="ui-droppable cardSlots " id="droppable19" data-parkid="19"   >7011</div>
        <div  class="ui-droppable cardSlots " id="droppable20" data-parkid="20"   >7012</div>
        <div  class="ui-droppable cardSlots " id="droppable21" data-parkid="21"   >501</div>
        <div  class="ui-droppable cardSlots " id="droppable22" data-parkid="22"   >503</div>
        <div  class="ui-droppable cardSlots over" id="droppable23" data-parkid="23"   >504</div>
        <div  class="ui-droppable cardSlots over" id="droppable24" data-parkid="24"   >505</div>
        <div  class="ui-droppable cardSlots " id="droppable25" data-parkid="25"   >506</div>
        <div  class="ui-droppable cardSlots " id="droppable26" data-parkid="26"   >507</div>
        <div  class="ui-droppable cardSlots " id="droppable27" data-parkid="27"   >508</div>
        <div  class="ui-droppable cardSlots " id="droppable28" data-parkid="28"   >509</div>
        <div  class="ui-droppable cardSlots " id="droppable29" data-parkid="29"   >5010</div>
        <div  class="ui-droppable cardSlots " id="droppable30" data-parkid="30"   >101</div>
        <div  class="ui-droppable cardSlots " id="droppable31" data-parkid="31"   >102</div>
        <div  class="ui-droppable cardSlots " id="droppable32" data-parkid="32"   >103</div>
        <div  class="ui-droppable cardSlots " id="droppable33" data-parkid="33"   >104</div>
        <div  class="ui-droppable cardSlots " id="droppable34" data-parkid="34"   >105</div>
        <div  class="ui-droppable cardSlots " id="droppable35" data-parkid="35"   >107</div>
        <div  class="ui-droppable cardSlots " id="droppable36" data-parkid="36"   >108</div>
        <div  class="ui-droppable cardSlots " id="droppable37" data-parkid="37"   >109</div>
        <div  class="ui-droppable cardSlots " id="droppable38" data-parkid="38"   >110</div>
        <div  class="ui-droppable cardSlots " id="droppable39" data-parkid="39"   >111</div>
        <div  class="ui-droppable cardSlots " id="droppable40" data-parkid="40"   >113</div>
        <div  class="ui-droppable cardSlots " id="droppable41" data-parkid="41"   >114</div>
        <div  class="ui-droppable cardSlots " id="droppable42" data-parkid="42"   >301</div>
        <div  class="ui-droppable cardSlots " id="droppable43" data-parkid="43"   >222</div>
      
  </div>
  <!--<div id="drop" class="fbox">
  
</div>-->
</div>