ソート後にcontenteditableが機能しない

Question

ソート後のコンテンツ編集可能は左クリックでは機能しませんが、右クリックで機能します。どうして？

$(function(){ 

    $("#textTemplate").draggable({ 
    helper: "clone", 
    zIndex: 2500 
    }); 
    $("#editorDesignView").droppable({ 
     accept: '#textTemplate', 
     drop: function(event, ui) { 
     var html = '<div id="" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">Add your text here.</p></div>'; 
    $(html).appendTo(this).hide().slideDown(); 

     } 
    }); 
    $('#editorDesignView').sortable(); 


}); 

Here is my jsfiddle

Answer 1

そのは、クリックイベントを追い越すため、あなたはソート可能な要素のハンドラを作成する場合、それは良いかもしれません。私はドラッグ可能な領域を作成したい `tを.draggable-areaを持つ要素を作成し、sortable handle option

$(function(){ 

    $("#textTemplate").draggable({ 
    helper: "clone", 
    zIndex: 2500, 
    }); 
    $("#editorDesignView").droppable({ 
     accept: '#textTemplate', 
     drop: function(event, ui) { 
     var html = '<div id="" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">Add your text here.</p><div style="padding:20px;" class="draggable-area"></div></div>'; 
    $(html).appendTo(this).hide().slideDown(); 

     } 
    }); 
    $('#editorDesignView').sortable({ 
     handle: '.draggable-area' 
    }); 


}); 

Updated your fiddle