可拖动Div(带Gridster.js)和内联编辑不起作用

Question

我想用gridster构建一个可拖动的网格，并希望在每个可拖动div中启用contenteditable = true。但是目前我只能将Divs拖动，似乎Gridster.js否决了点击事件或其他内容，因此contenteditable = true参数无法识别我单击Div。

我试图定义一个可拖动的句柄，以便可以将DIV拖动使用该句柄（这与JQuery UI拖动一起使用），但这也不起作用。

是否可以拖动Divs，当用户触发双击时，他单击的DIV会得到可编辑？

我的HTML代码看起来像：

<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
            <div contenteditable="true">Test 1</div>
            <span class="drag-handle">HAND</span>
        </li>
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
            <div contenteditable="true">Test 2</div>
            <span class="drag-handle">HAND</span>
        </li>
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
            <div contenteditable="true">Test 3</div>
            <span class="drag-handle">HAND</span>
        </li>
    </ul>
</div>

我的JS看起来像：

$(document).ready(function() {
    var grid = $(".gridster ul").gridster({
        max_cols: 2,
        widget_margins: [10, 2],
        widget_base_dimensions: [140, 40],
        resize: {
            enabled: true,
            axes: ['x']
        },
        draggable: {
            handle: '.drag-handle'
        }
    })
    $("li").dblclick(function() {
        grid.data('gridster').disable();
        $(this + " p").attr("contenteditable","true");
    });
});

目前，双击gridster.js之后，它将被禁用，但是之后内容不可编辑。

编辑：似乎focus()事件存在问题。当我明确注册click()事件并在可编辑元素上调用focus()时，我可以编辑文本！

Answer 1

gridster.js拖动和调整大小处理程序正在拦截 selectstart事件，并通过返回false来取消进一步的传播，除非它们都是 。归档该调用gridster.disable(); gridster.disable_resize();并之后启用它们