How to change focus onmousedown with jQuery?

Question

I have the following situation: There are two DIV elements that are positioned absolute at the same position and with the same dimensions. The div element a has a z-index of 10, the div element b a z-index of 20. Div element a is draggable, but div element b is not draggable.

Now I would like to change the focus after a mousedown element. If the user presses the mouse button on div element b, the focus should be on div element a so that it could be dragged away without having to stop pressing the mouse button.

Is that possible and how can I realise it? My first approach does not work:

<style type="text/css">
    #elementa{position:absolute;top:0;left:0;width:50px;height:50px;z-index: 10;}
    #elementb{position:absolute;top:0;left:0;width:50px;height:50px;z-index: 20;}
</style>
    <div id="elementa"></div>
    <div id="elementb"></div>

$('#elementb').mousedown (function(){
    $('#elementb').unbind("mousemove");
    $('#elementb').blur();
    $('#elementb').css({'display': 'none'});
    $( '#elementa').focus();
});

Chances are you need to use jQuery method `.prev('.element-class')` to grab the previous element. It will make life easier if you use classes instead of IDs. — NightOwlPrgmr, Aug 17 '15 at 10:47
You could dispatch event to `#elementa` e.g http://stackoverflow.com/a/26756864/1414562 or on modern browsers use `#elementb { pointer-events: none;}` but it sounds like a design issue. Why do you need to set an other DIV over an other one? — A. Wolff, Aug 17 '15 at 10:51
Pointer events is exactly what I needed. Thank you so much. I did not know this property — JavaForAndroid, Aug 17 '15 at 11:16

score 0 · Answer 1 · answered Aug 17 '15 at 11:04

I guess all you need is to show some temporary div over some hidden gems behind. and when user clicks on it show the gem and make it draggable as well.

This is what i did with this. may be this could help. This one works like charm...

A will instantly become draggable... find my code here

var b = $("#b");
$(".containerTest").on("mousedown", function(evnt){
     b.css({'display': 'none'});
});

https://jsfiddle.net/Peripona/7kpge52e/

score 0 · Answer 2 · answered Aug 17 '15 at 12:01

$( '#elementb').mousedown (function(){
    $(this).mousemove(function(){
        $( document ).trigger("mousemove");
    });
    $( document ).mousemove(function(e){
        console.log(e.clientX,e.clientY);
        $( '#elementa').css({"left":e.clientX,"top":e.clientY});
    });
});

How to change focus onmousedown with jQuery?

2 Answers2

DEMO