javascript - 可拖动 DIV(使用 gridster.js)和内联编辑不起作用

Question

我想用 gridster 构建一个可拖动的网格并希望在每个可拖动的 DIV 中启用 contenteditable = true。但目前我只能拖动 DIV，似乎 gridster.js 正在否决点击事件或其他东西，所以 contenteditable = true 参数无法识别我点击分区。

我试图定义一个可拖动的句柄，这样 DIV 就可以用那个句柄拖动(这适用于 jQuery UI 可拖动)，但这也不起作用。

是否可以拖动 DIV，当用户双击时，他点击的 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(); 然后启用它们