javascript - 无法从可拖动的可编辑 DIV 中选择文本

Question

我用 gridster 构建了一个可拖动的网格并遇到了我的可编辑 DIV 不可编辑的问题，因为 gridster.js 覆盖了 click 事件。我找到了解决方案，当我点击进入DIV时可以手动触发focus()函数，现在这个DIV里面的文本是可变的但是不可选择(不是with鼠标或键盘)。

您知道导致这种行为的原因吗？我用我的代码制作了一个 JSFiddle -> CLICK

HTML 看起来像:

<div class="gridster" id="frame" style="border:1px solid #cecece;">
    <ul>
        <li class="widget" data-row="1" data-col="1" data-sizex="2" data-sizey="1">
            <div id="testID">Test 1</div>
            <div class="drag-handle">HAND</div>
        </li>
        <li class="widget" data-row="1" data-col="1" data-sizex="2" data-sizey="1">
            <div>Test 2</div>
            <div class="drag-handle">HAND</div>
        </li>
    </ul>
</div>

JS 看起来像:

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

    $("#testID").click(function(){
          gridster.disable();
          $(this).attr("contenteditable","true");
          $(this).focus();
    })
    .blur(function(){
          gridster.enable();
    });
});

Answer 1

发现问题。问题是 resize 功能。所以解决方案不仅是在用户点击时关闭 draggable() 功能，还应该关闭 resize 功能。

关闭:

gridster.disable().resize_disable();

开启:

gridster.enable().resize_enable();

现在，当用户双击该字段时，我也完成了 editable 任务，因为这是一个更好的解决方案，错误行为更少。