Draggable DIV (with gridster.js) and inline editing not working

I want to build a draggable grid with a gridster and include contenteditable = truein each draggable DIV. But for now, I can just drag the DIV around, it seems that gridster.js is intercepting the click event or something else, so the parameter contenteditable = truedoes not recognize that I am pushing the DIV.

I tried to define a draggable handle, so the DIV can be simply dragged using this handle (this works with jQuery UI draggable), but it also does not work.

Is it possible to drag the DIV around, and when the user starts a double click, the DIV where he clicked is edited?

My HTML code looks like this:

<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>

My js look like this:

$(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 , .

EDIT: , focus(). click() focus() , !