Skip to content

Instantly share code, notes, and snippets.

@jinan-kordab
Created April 10, 2019 01:59
Show Gist options
  • Save jinan-kordab/48ea0e2d2decf4c0842b1ab060d32119 to your computer and use it in GitHub Desktop.
Save jinan-kordab/48ea0e2d2decf4c0842b1ab060d32119 to your computer and use it in GitHub Desktop.
Responsive Design Draggable and Droppable functionality - by Jinan Kordab - demo
<html>
<!-- DESIGN BY JINAN KORDAB -->
<!-- DATE: APRIL 9, 2019 -->
<!-- BOOTSTRAP RESPONSIVE DESIGN - FRONT END ONLY -->
<!-- DEMO USAGE OFDRAG AND DROP FUNCTIONALITY. -->
<!-- I FOUND THAT JAVASCRIPT IS THE BEST OPTIONS O FAR FOR HANDLING DRAG AND DROP SINCE THERE ARE MANY THIRD PARTY LIBRARIES AS WELL -->
<!-- THIS PAGE SHOWS AN OPTIONS MENU,WITH BOOTSTRAP FOR RESPONSIVE DESIGN, WHEN DROPPED INTO THE MIDDLE CONTAINER,TRIGGERS THE droppable EVENT. -->
<!-- INSIDE droppable EVENT,WE CAN ADD AJAX CALLS TO BACK END OT TO ASP.NET MVC CONTROLLERS AND ACTION RESULTS TO GET DATA FROMD ATA BASE -->
<!-- YOU CAN USE THIS CODE AS YOU WISH -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jinan Kordab Draggable with Boostrap Example</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable({
opacity: 0.35,
containment: "#droppable",
revert: true,
helper: "clone",
helper: function( event ) {
return $( "<div class='badge badge-success'>TIPS DETAILS</div>" );
},
snap: "#droppable",
start: function() {
},
drag: function() {
},
stop: function() {
}
});
$( "#draggable2" ).draggable({
opacity: 0.35,
containment: "#droppable",
revert: true,
helper: "clone",
helper: function( event ) {
return $( "<div class='badge badge-success'>SALES DETAILS</div>" );
},
snap: "#droppable",
start: function() {
},
drag: function() {
},
stop: function() {
}
});
$( "#draggable3" ).draggable({
opacity: 0.35,
containment: "#droppable",
revert: true,
helper: "clone",
helper: function( event ) {
return $( "<div class='badge badge-success'>MONTHLY DETAILS</div>" );
},
snap: "#droppable",
start: function() {
},
drag: function() {
},
stop: function() {
}
});
$( "#draggable4" ).draggable({
opacity: 0.35,
containment: "#droppable",
revert: true,
helper: "clone",
helper: function( event ) {
return $( "<div class='badge badge-success'>WEEKLY DETAILS</div>" );
},
snap: "#droppable",
start: function() {
},
drag: function() {
},
stop: function() {
}
});
$( "#draggable5" ).draggable({
opacity: 0.35,
containment: "#droppable",
revert: true,
helper: "clone",
helper: function( event ) {
return $( "<div class='badge badge-success'>YTD DETAILS</div>" );
},
snap: "#droppable",
start: function() {
},
drag: function() {
},
stop: function() {
}
});
$( "#draggable6" ).draggable({
opacity: 0.35,
containment: "#droppable",
revert: true,
helper: "clone",
helper: function( event ) {
return $( "<div class='badge badge-success'>OPTION ONE DETAILS</div>" );
},
snap: "#droppable",
start: function() {
},
drag: function() {
},
stop: function() {
}
});
$( "#draggable7" ).draggable({
opacity: 0.35,
containment: "#droppable",
revert: true,
helper: "clone",
helper: function( event ) {
return $( "<div class='badge badge-success'>OPTION TWO DETAILS</div>" );
},
snap: "#droppable",
start: function() {
},
drag: function() {
},
stop: function() {
}
});
$( "#draggable8" ).draggable({
opacity: 0.35,
containment: "#droppable",
revert: true,
helper: "clone",
helper: function( event ) {
return $( "<div class='badge badge-success'>OPTION THREE DETAILS</div>" );
},
snap: "#droppable",
start: function() {
},
drag: function() {
},
stop: function() {
}
});
$( "#draggable9" ).draggable({
opacity: 0.35,
containment: "#droppable",
revert: true,
helper: "clone",
helper: function( event ) {
return $( "<div class='badge badge-success'>OPTION FOUR DETAILS</div>" );
},
snap: "#droppable",
start: function() {
},
drag: function() {
},
stop: function() {
}
});
$( "#draggable10" ).draggable({
opacity: 0.35,
containment: "#droppable",
revert: true,
helper: "clone",
helper: function( event ) {
return $( "<div class='badge badge-success'>OPTION FIVE DETAILS</div>" );
},
snap: "#droppable",
start: function() {
},
drag: function() {
},
stop: function() {
}
});
$( "#draggable11" ).draggable({
opacity: 0.35,
containment: "#droppable",
revert: true,
helper: "clone",
helper: function( event ) {
return $( "<div class='badge badge-success'>OPTION SIX DETAILS</div>" );
},
snap: "#droppable",
start: function() {
},
drag: function() {
},
stop: function() {
}
});
$( "#droppable" ).droppable({
drop: function( event, ui ) {
var options = {};
var draggable = ui.draggable;
//alert(draggable.attr('id'));
if(draggable.attr('id') == "draggable")
{
$( "#draggable" ).effect( "bounce", options, 500, callback );
//$( "#draggable" ).parent().innerText = $( "#draggable" ).innerText;
}
else if(draggable.attr('id') == "draggable2")
{
$( "#draggable2" ).effect( "bounce", options, 500, callback );
//$( "#draggable2" ).parent().innerText = $( "#draggable" ).innerText;
}
else if(draggable.attr('id') == "draggable3")
{
$( "#draggable3" ).effect( "bounce", options, 500, callback );
//$( "#draggable3" ).parent().innerText = $( "#draggable" ).innerText;
}
else if(draggable.attr('id') == "draggable4")
{
$( "#draggable4" ).effect( "bounce", options, 500, callback );
//$( "#draggable4" ).parent().innerText = $( "#draggable" ).innerText;
}
else if(draggable.attr('id') == "draggable5")
{
$( "#draggable5" ).effect( "bounce", options, 500, callback );
//$( "#draggable5" ).parent().innerText = $( "#draggable" ).innerText;
}
else if(draggable.attr('id') == "draggable6")
{
$( "#draggable6" ).effect( "bounce", options, 500, callback );
//$( "#draggable6" ).parent().innerText = $( "#draggable" ).innerText;
}
else if(draggable.attr('id') == "draggable7")
{
$( "#draggable7" ).effect( "bounce", options, 500, callback );
//$( "#draggable7" ).parent().innerText = $( "#draggable" ).innerText;
}
else if(draggable.attr('id') == "draggable8")
{
$( "#draggable8" ).effect( "bounce", options, 500, callback );
//$( "#draggable8" ).parent().innerText = $( "#draggable" ).innerText;
}
else if(draggable.attr('id') == "draggable9")
{
$( "#draggable9" ).effect( "bounce", options, 500, callback );
//$( "#draggable9" ).parent().innerText = $( "#draggable" ).innerText;
}
else if(draggable.attr('id') == "draggable10")
{
$( "#draggable10" ).effect( "bounce", options, 500, callback );
//$( "#draggable10" ).parent().innerText = $( "#draggable" ).innerText;
}
else if(draggable.attr('id') == "draggable11")
{
$( "#draggable11" ).effect( "bounce", options, 500, callback );
//$( "#draggable11" ).parent().innerText = $( "#draggable" ).innerText;
}
}
});
} );
function callback() {
};
</script>
<style type="text/css">
.col-sm.border.rounded.border-warning:hover {
border: 1px solid #6c757d !important;
}
.block {
/* display: block; */
width: 100%;
height: 45px;
/* border: none; */
/* background-color: silver; */
/* padding: 0px 0px; */
/* font-size: 13px; */
/* cursor: pointer; */
/* text-align: center; */
/* color: white; */
font-weight: bold;
overflow: hidden;
}
</style>
</head>
<body class="bg-light">
<nav class="navbar navbar-expand-lg navbar-light bg-info ">
<a class="navbar-brand text-white" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link text-white" href="#">HOME
<span class="sr-only">(current)</span></a> </li>
<li class="nav-item"><a class="nav-link text-white" href="#">CONTACT</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
SERVICES </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">SERVICE A</a>
<a class="dropdown-item" href="#">SERVICE B</a>
<div class="dropdown-divider">
</div>
<a class="dropdown-item" href="#">SERVICE C</a> </div>
</li>
<li class="nav-item"><a class="nav-link disabled text-white" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-warning my-2 my-sm-0 text-white" type="submit">
Search</button>
</form>
</div>
</nav>
<hr>
<div class="container-fluid" id="mainMenu">
<div class="row">
<div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important;">
<div id="draggable" class="btn btn-warning block" style="width:100%">
TIPS</div>
</div>
<div class="col-sm border rounded " style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important">
<div id="draggable2" class="btn btn-warning block" style="width:100%">
SALES</div>
</div>
<div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important">
<div id="draggable3" class="btn btn-warning block" style="width:100%">
MONTHLY</div>
</div>
<div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important">
<div id="draggable4" class="btn btn-warning block" style="width:100%">
WEEKLY</div>
</div>
<div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important">
<div id="draggable5" class="btn btn-warning block" style="width:100%">
YTD</div>
</div>
<div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important">
<div id="draggable6" class="btn btn-warning block" style="width:100%">
OPTION</div>
</div>
<div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important">
<div id="draggable7" class="btn btn-warning block" style="width:100%">
OPTION</div>
</div>
<div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important">
<div id="draggable8" class="btn btn-warning block" style="width:100%">
OPTION</div>
</div>
<div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important">
<div id="draggable9" class="btn btn-warning block" style="width:100%">
OPTION</div>
</div>
<div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important">
<div id="draggable10" class="btn btn-warning block" style="width:100%">
OPTION</div>
</div>
<div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important">
<div id="draggable11" class="btn btn-warning block" style="width:100%">
OPTION</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="droppable" style="border:2px solid red;width:100%;height:98%;margin-top:5px">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment