Как избежать фокусировки div, когда он щелкнет и перетащил ..?

Question

Я хотел бы сделать фокус div только на onclick. Draggable отлично работает, но когда я заканчиваю свой вариант перетаскивания, div становится сфокусированным. А также мне нужно удалить курсор : переместите в курсор: auto при нажатии на div. Пожалуйста, помогите мне ..

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