draggable sortable

by Akram kamal

HTML

<div class="draggable-box">
    <div class="editable" contenteditable="true">Div</div>
</div>
<div class="dest"></div>

CSS

.draggable-box {
    border:1px solid #808080;
    padding:5px;
}
.editable {
    max-width:100%;
    padding:5px;
    display: inline-block;
    word-wrap:break-word;
}
div.dest {
    border:1px solid #808080;
    min-height:300px;
    padding: 30px 0px;
}

JavaScript

$('.dest').sortable({
    revert: true,
});
$('.draggable-box').draggable({
    connectToSortable: '.dest',
    helper: 'clone',
    revertDuration: 0
});
$(document).on("click",".draggable-box",function(){
    $("[contenteditable]",this).focus()
})