Sortableリストは、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

はコードの下に参照され、あなたはちょうどあなたがULの内側にformタグを使用しているされて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 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>