javascript - 允许 dragstart-Event 而不会失去其他控件的焦点

Question

我想在页面上实现一些可拖动的元素，这些元素不应该破坏页面上当前获得焦点的控件。这就是我的尝试:

$('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" />

如果我激活 event.preventDefault()，焦点不会在 mousedown 上丢失，但拖动操作无法再开始。有谁知道如何解决这个问题？

Answer 1

我想，setTimeout 会解决您的问题

$('input').focus();
$('div').on('mousedown', function(event) {
  window.setTimeout(
    function() {
      $('input').focus();
    }, 1);
});

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" />

结果；

jsfiddle

希望有所帮助，