当它被点击并拖动时，如何避免聚焦一个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

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

.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'
        });
    }
 });
});