CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Affan Ahmad
Affan Ahmad

Reputation: 451

How to drag and re-size contentEditable="true" div

I am using jquery-ui drag and re-sizable with editable div.now i am facing problem editable div by default activate editing on click. drag and re-size has same function i mean on click these function also trigger.So how can i handle this problem i need when user double click on editable div than editing active.other wise re-sizable and drag-able function should work.

HTML 

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

JavaScript

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

});

Upvotes: 2

Views: 2425

Answers (2)

A. Wolff
A. Wolff

Reputation: 74410

You could as a workaround use following snippet:

DEMO

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

It is not perfect because you need an other click to set correct position of carret for editable DIV.

Upvotes: 2

Udit Bhardwaj
Udit Bhardwaj

Reputation: 1781

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

Upvotes: 2

Related Questions