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>
<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>
No comments:
Post a Comment
Thank You For Comment