javascript - 单击并拖动时如何避免将焦点集中在 div 上？

Question

我想让 div 仅关注 onclick。 Draggable 工作得很好，但是当我完成拖动选项时，div 就会聚焦。而且我还需要在单击 div 时将 cursor: move 删除为 cursor: auto 。请帮助我..

$(function() {
var block = $('#text-block')
block.find('.editable-text').resizable({
    containment: $('#drag-area'),
    handles: {
        nw: block.find('.nw'),
        ne: block.find('.ne'),
        sw: block.find('.sw'),
        se: block.find('.se')
    }, 
    minWidth: 50, minHeight: 18
})
});

$(function() {
$( ".editable-text" ).draggable();
});

我的代码在 JSfiddle ...!

Answer 1

在 css 中的 .editable-text 选择器下添加以下行

.editable-text {
    /*your old code*/
    outline:none;
}

fiddle

编辑: 防止文本选择 将 noselect 类添加到 noselect并在你的css文件中写入以下内容

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           

}

如果您正在寻找的话，还可以查看jquery更改以更改光标

Fiddle3 updated

复制这段js代码

  $(function() {
  var block = $('#text-block')
  block.find('.editable-text').resizable({
    containment: $('#drag-area'),
    handles: {
        nw: block.find('.nw'),
        ne: block.find('.ne'),
        sw: block.find('.sw'),
        se: block.find('.se')
    }, 
    minWidth: 50, minHeight: 18
  })
});

$(function() {
  $( ".editable-text" ).draggable();

 $(".editable-text").mousedown(function(e){
    if(e.which == 1) {
      $(this).css({
        'cursor':'move'
      });
            }else{
      $(this).css({
          'cursor':'auto'
        });
    }
 });
});