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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果我激活event.preventDefault（），则焦点不会在mousedown上丢失，但拖动操作不能再启动。有谁知道如何解决这个问题？

Answer 1

我猜，setTimeout将解决您的问题

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<强>结果;

jsfiddle

希望有所帮助，

Answer 2

＆＃13;

＆＃13;

$(document).ready(function(){
$("div").on("mousedown",function(event){
event.preventDefault();
$("div").draggable();
$("input").droppable({
            drop: function(event, ui) {
                $("input").css('background', 'rgb(0,200,0)');
                }
            });
});

});

＆＃13;

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

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   

<div draggable="true">Hello World</div><br />
The input field should not loose focus, when dragging "Hello World".<br />
<input type="text" />

＆＃13;

＆＃13;

＆＃13;