Question

我正在使用jquery-ui拖动并重新调整可编辑div.now我面临问题可编辑div默认情况下激活编辑点击。拖动和重新大小具有相同的功能，我的意思是单击这些功能也触发。所以我如何处理这个问题，我需要当用户双击可编辑的div而不是编辑active.other明智的重新大小和可拖动功能应该工作。

HTML

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

的JavaScript

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

}）;

Answer 1

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

DEMO

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

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

Answer 2

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

如何拖动和重新调整contentEditable =“true”div的大小

2 个答案: