Draggable element on top

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

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.

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.

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);
});
});

[ziaurrehman]

hey venkat! love ur all videos and learned alot from you bro.
the drag and drop functionality work perfect but the problem is how to persist the position of each element even if we refresh the page. Or how to save this as a template when set the dragging positions, i.e. saving the positions along with each element in database on Save Button Click and then get it back on Clicking Retrieve Button.

[besim]

at 3:50 you can see how much he is trying to make us understand jquery