HTML5，draggable和contentEditable不能一起工作

Question

當在父元素（ <li> ）上啟用了draggable屬性時，我無法對其子元素（ <a> ）進行contenteditable工作。

重點是子元素（ <a> ），但我根本無法編輯它。

請檢查此樣本

http://jsfiddle.net/pavank/4rdpV/11/

編輯：當我在<li>上禁用draggable時，我可以編輯內容

Answer 1

我今天遇到了同樣的問題，並找到了一個解決方案[使用jQuery]

$('body').delegate('[contenteditable=true]','focus',function(){
    $(this).parents('[draggable=true]')
            .attr('data-draggableDisabled',1)
            .removeAttr('draggable');
    $(this).blur(function(){
        $(this).parents('[data-draggableDisabled="1"]')
                .attr('draggable','true')
                .removeAttr('data-draggableDisabled');
    });
});

$('body')可以被更具體的東西取代。

如果未在運行時添加新的contenteditable元素，則可以使用bind而不是delegate 。

Answer 2

有意義的是， draggable和draggable contenteditable屬性會發生碰撞。 與任何文本字段一樣， contenteditable元素將專注於mousedown（而不是單擊）。 draggable元素基於mousemove進行操作，但在contenteditable元素中選擇文本也是如此，那么瀏覽器將如何確定您是在嘗試拖動元素還是選擇文本？ 由於屬性不能在同一元素上共存，因此您需要一個javascript解決方案。

嘗試將這兩個屬性添加到錨標記：

onfocus="this.parentNode.draggable = false;"
onblur="this.parentNode.draggable = true;"

如果我將它添加到你的jsFiddle中的<a>標簽，這對我有用。 如果它比獲取parentNode更復雜，你也可以使用jQuery。

Answer 3

注意：這是一種解決方法，因為我認為這兩個功能無法協同工作存在於HTML規范本身（即，由於瀏覽器無法確定您是否要關注或拖動mousedown，因此無法合作的事情是故意的事件）

---

我注意到你明確設置'沒有庫'，所以我將提供一個原始的javascript / HTML5答案

http://jsfiddle.net/4rdpV/26/

這是我對它的破解。

首先，最好將數據包含在一個localStorage項中，而不是將其分散。

 storage={ '1.text':'test 1', '2.text':'test 2' } if(localStorage['test']){ storage=JSON.parse(localStorage['test']) } 

這創建了這種能力，使用JSON在對象和字符串之間進行轉換。 對象確實可以嵌套

我還添加了(edit)項目旁邊的鏈接，單擊這些鏈接時，這些鏈接會將項目轉換為input元素，因此您可以編輯文本。 點擊進入后，它會將其轉換回來並保存數據。 同時，列表項仍然可以拖動。

保存后，在chrome中點擊F12，找到控制台，然后查看localStorage對象，您將看到所有數據都使用JSON.stringify()作為Object保存在localStorage['test']中

我盡力將它設計成可擴展的，我認為我成功了; 你只需要用容器替換HTML並使用javascript for循環來寫出幾個項目，使用你選擇的迭代器來填充edit()的參數。 例如：

假設您更改了存儲以保存列表的“范例”，並且您有一個名為“購物清單”的存儲。 並說存儲對象看起來像這樣：

for(i in storage['shopping list']){
    _item = storage['shopping list'][i];
    container.innerHTML+='<li draggable=true><a id="item'+i+'">'+_item+'</a><a href="#" onclick="edit('+i+')"> (edit)</a></li>'
}

這可能會導致列出：

 for(i in storage['shopping list']){ _item = storage['shopping list'][i]; container.innerHTML+='<li draggable=true><a id="item'+i+'">'+_item+'</a><a href="#" onclick="edit('+i+')"> (edit)</a></li>' } 

當然，如果要編輯存儲對象的結構，則還需要編輯這些函數。

輸出看起來像這樣：

 Milk (edit) Eggs (edit) Bread (edit) 

如果您擔心，請不要擔心輸入元素; CSS可以很容易地修復它看起來不僅僅是改變。

例如，如果您不希望(edit)鏈接可見，則可以在CSS中執行此操作：

 a[href="#"]{ display:none; } li[draggable="true"]:hover a[href="#"]{ display:inline; } 

現在只有將鼠標懸停在列表項上時才會顯示編輯鏈接，如此版本：

http://jsfiddle.net/4rdpV/27/

---

我希望這個答案有所幫助。

Answer 4

使用html5sortable和更新的JQuery事件（委托已被棄用，在初始問題后3年回答），bug仍然影響Chrome 37. Contenteditable spans和html5sortable似乎在其他瀏覽器中表現不錯。 我知道這只是部分相關，只是記錄我注意到的變化。

$(document).on('focus', 'li span[contenteditable]', function() {
    $(this).parent().parent().sortable('destroy'); // removes sortable from the whole parent UL
});

$(document).on('blur', 'li span[contenteditable]', function() {
    $(this).parent().parent().sortable({ connectWith: '.sortable' }); // re-adds sortable to the parent UL
});