jQuery Sortable/Draggable list disableselection() not working

Question

I am using HTML5 Sortable for Sortable and Draggable list.

Issue

I am using jQuery disableSelection() for disabling list moving from right to left. That is not working. is there any other way to avoid list moving from right to left.

HTML

<section>
        <h1>Sortable Lists</h1>
        <ul id="sortable1" class="connected sortable list">
            <li draggable="true">Item 1
            </li><li draggable="true">Item 3
            </li><li draggable="true" class="" style="display: list-item;">Item 2
            </li><li draggable="true">Item 4
            </li><li draggable="true">Item 5
            </li><li draggable="true">Item 6
        </li></ul>
        <ul id="sortable2" class="connected sortable list">
            <li class="highlight" draggable="true">Item 1
            </li><li class="highlight" draggable="true" style="display: list-item;">Item 2
            </li><li class="highlight" draggable="true">Item 3
            </li><li class="highlight" draggable="true">Item 4
            </li><li class="highlight" draggable="true">Item 5
            </li><li class="highlight" draggable="true">Item 6
        </li></ul>
    </section>

jQuery

$(function () {
       $(".connected").sortable({
           connectWith: ".connected"
        }).disableSelection();
});

Fiddle

I have put the code in Fiddle

Answer 1

Use #id instead of .ClassName add one more disableSelection() method for Partiular #id

 $(function () {

   $("#sortable1").sortable({
       connectWith: "#sortable2"
    }).disableSelection();

    $("#sortable2").sortable({
    }).disableSelection();

});

Updated Fiddle Here