Sortable list moves the entire list instead of each list element with Jquery

Question

I am trying to make a sortable list but the jQuery sortable function moves the entire list itself instead of the elements of the list.

<ul class="list-group" id="sortable">
    <form class="form-horizontal" role="form" method="POST" id="priority" action="{{ url('somewhere') }}">
        {{csrf_field()}}
        @foreach($itemsas $item)
            <li class="list-group-item active">{{$item->name}}
                <input type="hidden" name="priority" value="{{$item->id}}">
            </li>
        @endforeach
    </form>
</ul>

Here is my javascript:

$(function() {
    $( "#sortable" ).sortable();
});

I would create an snippet but I don't know any blade-supporting snipet sites. Here is a somewhat accurate DEMO

Answer 1

See below code, you just have to put your form out from ul li

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

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script> <form class="form-horizontal" role="form" method="POST" id="priority"> <ul class="list-group" id="sortable"> <li class="list-group-item active">hello <input type="hidden" name="priority" value="1"></li> <li class="list-group-item active">hello <input type="hidden" name="priority" value="1"></li> <li class="list-group-item active">hello <input type="hidden" name="priority" value="1"></li> <li class="list-group-item active">hello <input type="hidden" name="priority" value="1"></li> </ul> </form> 

Answer 2

The problem is you are using form tag inside ul.

Use as:

<ul class="list-group" id="sortable">
    <li class="list-group-item active">hello
   <input type="hidden" name="priority" value="1">
   </li>
   <li class="list-group-item active">hello
     <input type="hidden" name="priority" value="1">
   </li>
   <li class="list-group-item active">hello
     <input type="hidden" name="priority" value="1">
   </li>
   <li class="list-group-item active">hello
     <input type="hidden" name="priority" value="1">
   </li>
 </ul>