可排序列表移動整個列表，而不是每個列表元素與jquery

Question

我想做一個可排序的列表，但jQuery排序功能移動整個列表本身，而不是列表中的元素。

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

這裏是我的javascript：

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

我將創建一個片段，但我不知道任何葉片支撐snipet網站。這裏是一個略微準確DEMO

Answer 1

請參見下面的代碼，你就必須把你的形式出從ulli

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

問題是您在使用UL裏面的表單標籤。

用途爲：

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