火狐：如果它嵌套拖動父

Question

內CONTENTEDITABLE是不可編輯的我有這個simple html：

<div draggable=true> 
    <div contenteditable=true>can't edit me</div> 
</div> 

在Chrome中，我可以編輯的CONTENTEDITABLE的內容，但我不能這樣做，在Firefox和IE。這是一些已知的問題？爲什麼Chrome允許編輯？任何現有的解決方法？

Answer 1

問題是draggable元素的點擊處理與contenteditable處理衝突 - 都需要您單擊，以便使用哪個處理程序？

有幾個選項可以選擇。當你點擊，從而使用戶能夠專注於可編輯內容的版本低於禁用draggable，然後啓用它，如果你雙擊改爲：

<div class="content"> 
    <span>Edit and drag me</span> 
</div> 

$(".content").draggable() 
    .click(function() { 
    $(this).draggable({ disabled: false }); 
}).dblclick(function() { 
    $(this).draggable({ disabled: true }); 
}); 

另外，有一個很好的解決方案here涉及設置draggable的handle屬性經由類別選擇器（其用CSS定位）到外部元素。這可能比單擊事件更好，但這取決於您的使用情況。

更新 我添加了一個稍有修改的解決方案，我鏈接到上面的here。您可以編輯文本以及通過手柄圖標拖動整個文件。