Текст нельзя выбрать из редактируемого DIV, который можно перетаскивать

Я создал перетаскиваемую сетку с помощью gridster и столкнулся с проблемой, что мои редактируемые DIV недоступны для редактирования, потому что gridster.js переопределяет click мероприятие. Я нашел решение, что я могу вручную запускать функцию focus(), когда я нажимаю на DIV, и теперь текст внутри этого DIV можно изменить, НО нельзя выбрать (не с помощью мыши или клавиатуры).

Вы знаете, что вызывает такое поведение? Я создал 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();
    });
});