内容可编辑由jquery禁用

Question

我找到了一个可以克隆拖放元素的代码。但是当我尝试添加一些contenteditable的div标签时，div是不可编辑的。我用mozila检查它，发现它是因为jquery为父类div添加了一些功能，如mousedown，mouseup等。

在这里演示：http://jsfiddle.net/Klaudia/htgsdqos/

注意：我也从SO获得了这个代码:(所以，它不是我的）

HTML：

       

       

   

   

Jquery：

$("#left-pane li").draggable({
    containment: '#gbox',
    cursor: 'move',
    helper: 'clone',
    scroll: false,
    connectToSortable: '#right-pane',
    appendTo: '#right-pane',
    start: function () {},
    stop: function (event, ui) {}
}).mousedown(function () {});

$("#right-pane").sortable({
    sort: function () {},
    placeholder: 'ui-state-highlight',
    receive: function () {},
    update: function (event, ui) {}
});


$("#right-pane").droppable({
    accept: "#left-pane li",
    accept: ":not(.ui-sortable-helper)",
    drop: function (event, ui) {
        if ($(ui.draggable).find('.single-item').length == 0)
        {
            $(ui.draggable).append("<div class='single-item'><input type='text' class='item-title' /><br /><textarea class='item-text'></textarea></div>");
        }
    }
});

$("#left-pane").droppable({
    accept: "#right-pane",
    drop: function (event, ui) {}
});

$("ul, li").disableSelection();

所以我的问题是，如何保持div内容是可编辑的？

提前致谢。