Edit in JSFiddle

$(function() {
    $('span[contenteditable="true"]').on('focus', function (e) {
        $(this).parent().attr('draggable', 'false');
    }).on('blur', function (e) {
        $(this).parent().attr('draggable', 'true');
    })
});
<span id="container" draggable="true">
    <span class="text" contenteditable="true">This the the editable text.</span>
</span>
#container {
    padding: 30px 12px 12px;
    display: inline-block;
    width: 300px;
}

#container:hover {
    background: #ff0000;
}

#container:hover .text {
    color: #fff;
}