Draggable element on top

Описание: Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenka...

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
   / @aarvikitchen5572  

In this video we will discuss
1. How to keep draggable element always on top of other draggable elements on the page
2. How to bring the element on top of other draggable elements on the page as soon as the mouse down event is triggered

Consider the following code

HTML

<div id="redDiv" class="divClass" style="background-color: red">
Red Div
</div>

<div id="greeDiv" class="divClass" style="background-color: green">
Green Div
</div>

<div id="blueDiv" class="divClass" style="background-color: blue">
Blue Div
</div>

<div id="brownDiv" class="divClass" style="background-color: brown">
Brown Div
</div>

CSS

<style>
.divClass {
font-family:Arial;
height: 150px;
width: 150px;
color: white;
display: table-cell;
vertical-align: middle;
text-align: center;
z-index:0
}
</style>

jQuery

$(document).ready(function () {
$('.divClass').draggable();
});

All the div elements on this page are draggable. The problem here is that, when you drag Red Div it does not stay on top of other draggable div elements on the page. Green Div on the other hand stays on top of Red Div but stays below Blue and Red Div elements. This is the default behaviour.
// Draggable element on top.png

To bring a Div Element that is being dragged on top of other draggable div's on the page, use stack option. The way this works is jQuery sets the z-index of the element that is being dragged to higher than the z-index of any other draggable div element on the page. You can see the value of the z-index in browser developer tools.
$(document).ready(function () {
$('.divClass').draggable({
stack: '.divClass'
});
});

However, if you simply click on a Div element without dragging then the element is not brought on to the top. Here is the code to bring the element on top as soon as mousedown event is triggered. All this function does is change the z-index of the div element to a value greater than the z-index of any other div element.

$(document).ready(function () {
$('.divClass').draggable();

$('.divClass').mousedown(function () {
var maxZindex = 0;
$(this).siblings('.divClass').each(function () {
var currentZindex = Number($(this).css('z-index'));
maxZindex = currentZindex > maxZindex ? currentZindex : maxZindex;
});
$(this).css('z-index', maxZindex + 1);
});
});