Question

我想使用gridster构建一个可拖动的网格，并希望在每个可拖动的DIV中启用contenteditable = true。但是目前我只能拖动DIV，似乎gridster.js正在推翻点击事件或其他东西，因此contenteditable = true参数无法识别我点击进入DIV。

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

是否可以拖动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();并在之后启用它们

可拖动的DIV（使用gridster.js）和内联编辑无法正常工作

1 个答案: