<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BringToTop Demo</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<header id="header" class="header">
<div class="text-center text-danger">
<h4>Bring-To-Top Demo</h4>
<hr/>
</div>
</header><!-- /header -->
<section id="main-body">
<div class="container">
<div class="col-lg-12">
<!-- action btns -->
<button class="btn btn-sm btn-success add-btn">ADD NEW</button>
</div>
</div>
</section>
<section id="appendable-div">
<div class="container">
<div class="row">
<div id="draggable-container">
<!-- all the containers would be appended here -->
</div>
</div>
<a href="https://github.com/dev-sandeep/bringToTop">@author</a> - <a href="http://www.sandeepg.co.in" target="_blank">Sandeep Gantait / 20160801</a>
</div>
<!-- demo container goes here -->
<div class="demo-div" style="display:none">
<div class="ui-widget-content drag-container">
<p>Drag me around</p>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script src="main.js"></script>
<script src="dragToFront.js"></script>
</body>
</html>
/**
* responsible for handling all the actions of the UI
* @author Sandeep Gantait
* @since 2016801
*/
/**
* all JQUERY bindings goes here
*/
(function(){
var ctr = 1;
/* event binding for adding a new draggable container */
$('.add-btn').click(function(){
$('#draggable-container').append('<div class="ui-widget-content drag-container window-container container_id_'+ctr+'"><p>Container '+ctr+' <h1>'+ctr+'</h1></p></div>');
/* make it draggable */
$( "#draggable-container .drag-container" ).draggable();
/* assign z-index */
dragToFront.assignZIndex('.container_id_'+ctr);
ctr++;
});
}());
/**
* Responsible for managing the z-index of the containers just like the windows
* @author Sandeep G
* @since 20160801
*/
var dragToFront = {
/* initial counter for the z-index */
initialCounter : parseInt(11),
/**
* bring the clicked z-index to the front
*/
bringFront : function(elem, className)
{
className = className || 'window-container';
/* get the maximum z-index */
var max = this.getMaxZIndex(className);
/* assigning the max z-index to the clicked elem. */
$(elem).css('z-index', ++max);
/* traverse through each elem and making there z-index reduced by 1 */
$(className).each(function(){
var zIndex = $(this).css('z-index');
if(zIndex != max)//decrement the z-index only if it is not the element at the front
{
$(this).css('z-index', --zIndex);
}
});
},
/**
* assign a z-index to the div; while creating the draggable container gotta call 'em
*/
assignZIndex : function(elem, className)
{
className = className || 'window-container';
/* check if the div is existing */
var isExisting = $('.'+className).length;
if(!isExisting)//I am Fresher
{
$(elem).css('z-index', this.initialCounter);
this.counter = this.initialCounter;
}
else
{
var max = this.getMaxZIndex(className);
/* assign the max+1 to the new container */
$(elem).css('z-index', ++max);
}
this.bindClickEvent();
},
/**
* responsible for getting the max z-index
*/
getMaxZIndex : function(className)
{
var max = 0, zIndex;
/* traverse through all the classes and get the highest z-index */
$('.'+className).each(function(){
zIndex = $(this).css('z-index');
if(parseInt(zIndex) > max)
{
max = zIndex;
}
});
return max;
},
/**
* responsible for handling the z-indexes on click event
*/
bindClickEvent : function()
{
$('#appendable-div .window-container').on('mousedown', function(){
console.log("binding...");
/* get the list of classes */
var classList = $(this).attr('class').split(' ');
var uniqueClass = classList[3];
console.log('uniqueClass', uniqueClass);
dragToFront.bringFront('.'+uniqueClass);
});
}
};
/* all the styles gores here */
#draggable-container
{
width: 100%;
min-height: 300px;
background: #f9f9f9;
margin-top: 1%;
padding: 1%;
}
.drag-container
{
width: 150px;
height: 150px;
margin: 10px;
display: inline-block;
border: 1px solid gray;
padding: 10px;
box-shadow: 2px 2px 2px gray;
background: #fff;
}
.drag-container h1
{
text-align: center;
}