jQueryUI Draggable: Bring stack element to front on click

Published on January 21, 2013 JavaScript jQuery

If you are developing window-like elements on HTML using jQueryUI Draggable, you are probably using the stack option to ensure that the dragged element will always be on top. But the actual goal would be for that element to be on top onFocus, and that means whenever the user clicks on the element.

Exploring the jqueryUI source code for the Draggable widget we can extract the function that puts the element on top of the stack and bind it onClick for example.

Here is the function (Tweaked to work as a standalone function)

elem should be the clicked element and stack should be the same you put in jQueryUI draggable’s options. If you wanted that to happen on click, you could use: