CODEWITHSUNDEEP
javascriptjquerycontenteditablejsfiddlegridster
John Brunner
John Brunner

Reputation: 2872

Text not selectable from editable DIV which is draggable

I build a draggable grid with gridster and ran into the problem that my editable DIVs where not editable because gridster.js overrides the click event. I found the solution that I can manually trigger the focus() function when I click into the DIV, and now the text inside this DIV is changable BUT not selectable (not with mouse or the keyboard).

Do you know what causes this behavior? I made a JSFiddle with my code -> CLICK

The HTML looks like:

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

And the JS looks like:

$(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();
    });
});

Upvotes: 1

Views: 1099

Answers (1)

John Brunner
John Brunner

Reputation: 2872

Found the problem. Problem was the resize functionality. So the solution is to not just turn of the draggable() functionality when the user clicks, also you should have to turn off the resize function.

Turn off:

gridster.disable().resize_disable();

Turn on:

gridster.enable().resize_enable();

And I also accomplish the editable task now when the user double-clicks into the field, because this is a much nicer solution with less misbehaviour.

Upvotes: 2

Related Questions