Как сделать div draggable и contenteditable = "true"?

Question

Я попытался снова и снова, но мне просто кажется, что текст можно редактировать, а также перетаскивать, потому что когда я применяю .draggable(), contenteditable = "true" становится "false".

Javascript

$(".note").keyup(function() { 
    $(this).css('height' , '100%'); 
}); 

HTML

<div class="note" contenteditable="true"> 
    <span id='close' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'> 
     <img src="images/close.png" height="30" width="30" align="right" style="vertical-align: top; float: right"/> 
    </span> 
</div> 

CSS

.note { 
    width: 280px; 
    height: 130px; 
    padding-top: 20px; 
    margin-top: 60px; 
    margin-left: 25px; 
    padding: 2; 
    word-break: break-word; 
    font-family: Note; 
    font-size: 20px; 
    background-image: url("images/stickynote.png"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    z-index: 1; 
} 

Answer 1

Вы можете сделать это, чтобы сделать это так, если вы DOUBL e клик будет доступен для редактирования, но отдельные клики перетянут его.

$(".note").draggable() 
    .click(function() { 
    $(this).draggable({disabled: false}); 

}).dblclick(function() { 
    $(this).draggable({ disabled: true }); 
}); 

Добавьте это к кнопкам закрытия <img> кода будет держать его в правой верхней части контейнера:

position: relative; 
    top: -20px;