Allow dragstart-Event without loosing focus of other controls

I want to implement some draggable elements on the page, which should not break the currently focused control on the page. That is what I tried:

$('input').focus();
$('div').on('mousedown', function(event) {
  // event.preventDefault(); // drag does not work anymore
  // $('input').focus(); // focus still lost
});

div {
  display: inline-block;
  border: 1px solid green;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div draggable="true">Hello World</div><br />
The input field should not loose focus, when dragging "Hello World".<br />
<input type="text" />

If I activate event.preventDefault(), the focus is not lost on mousedown, but the drag operation cannot start anymore. Does anyone know how to solve this problem?

Allow dragstart-Event without loosing focus of other controls

2 Answers