Javascript 如何拖动和重新调整contentEditable的大小="；“真的”；div

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

HTML

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

---

}))

您可以使用以下代码段作为解决方法：

---

它并不完美，因为您需要再次单击以设置可编辑分区的正确卡雷特位置。

您可以使用以下代码段作为解决方法：

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

它并不完美，因为您需要再次单击以为可编辑DIV设置正确的carret位置

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

---

谢谢，但重新调整大小功能在我这边不起作用。您的演示工作正常，但当我在代码上使用时，大小功能不起作用。谢谢，但重新调整大小功能在我这边不起作用。您的演示工作正常，但当我在代码上使用时，大小功能不起作用。我正在寻找相同的解决方案。您的解决方案是准确的，工作非常好，感谢我一直在寻找相同的解决方案。您的解决方案是准确的，工作非常好，谢谢

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