3

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

我试图定义一个可拖动的句柄，以便可以使用该句柄拖动 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()在可编辑元素上调用 a 时，我可以编辑文本！

4

1 回答 1

0

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

于 2014-12-25T13:11:12.560 回答