Question

I have the following HTML:

<div class="section_rows">
    <div class="body-row crew">
        <input type="text" class="col1" name="cast_person" value="{{cast.person }}"/>
        <input type="text" class="col2" name="cast_character" value="{{ cast.character }}"/>
        <input class="ordering" type="hidden" name="cast_ordering" value="{{ cast.ordering }}" />
        <a href="#;" class="delete">X</a>
    </div>
</div>

And the following jQuery:

// drag and drop of cast and crew
$('.section_rows').sortable();
$( ".section_rows" ).disableSelection();

Currently, this disables the entire section_rows div container. How would I enabled the inputs inside it?

Answer 1

Can use handle option of draggable to only use an element within the container to drag with. Best solution will depend on your UI but this can be a helpful solution. Then don’t worry about calling disableSelection()