如何拖动内容并调整其大小可编辑= "true" div

Question

我使用jquery ui拖动并用可编辑div重新调整大小。现在我面临的问题是，默认情况下，可编辑div在单击时激活编辑。拖动和重新调整大小具有相同的功能，我的意思是点击这些功能也会触发。那么，当用户双击可编辑的div而不是编辑活动时，我该如何处理这个问题呢？其他方面，重新调整大小和可拖动的功能应该可以工作。

HTML

<div class="draggable resizable"><div id="field2" contentEditable='true'; >Company message</div></div>

JavaScript

$(function() {
$( ".resizable" ).resizable();
$(".draggable").draggable();

})；

Answer 1

$(".resizable").resizable();
$(".draggable").draggable({
  drag: function (event, ui) {
         ui.helper.children('#field2').blur()
        }
});
$('#field2').dblclick(function (e) {
  e.stopPropagation()
  $(this).focus(); //required because ui-draggable  makes the element unclickable
})
$('.draggable').click(function (e) {
  $(this).children('#field2').blur()
});

DEMO

Answer 2

您可以使用以下代码段作为变通方法：

演示

$('div[contentEditable=true]').on('dblclick', function (e) {
    $(this).closest('.draggable').draggable("destroy");
    this.focus();
}).on('blur',function(){
    $(this).closest('.draggable').draggable();
});

这并不完美，因为您需要另一次点击来设置可编辑DIV的carret的正确位置。