I have implemented HTML5 Sortable for creating a draggable and sortable list on my website.
Challenge
I tried using jQuery's disableSelection() function to prevent the list items from being moved from right to left, but it is not working as expected. Can someone suggest an alternative solution to achieve this?
HTML Code Snippet
<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
$(function () {
$(".connected").sortable({
connectWith: ".connected"
}).disableSelection();
});
Link to Demo
You can view the code in action on this Fiddle