コンテナの外にソート可能なジャンプ

Question

Jonas von Andrian's jQuery Sortable pluginに問題があります。アイテムを移動しようとすると、最初に.rowから飛び出し、それ以降は正常に移動できます。

私は間違っていますか？

$(".items-container").sortable({ 
 
    containerSelector: ".items-container", 
 
    itemSelector: ".item", 
 
    containerPath: "> .row" 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script> 
 

 
<div class="container"> 
 
    <div class="items-container"> 
 
    <div class="row"> 
 
     <div class="col-xs-4 panel panel-danger item"> 
 
     <div class="panel-heading">First panel</div> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div> 
 
     </div> 
 
     <div class="col-xs-4 panel panel-warning item"> 
 
     <div class="panel-heading">Second panel</div> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div> 
 
     </div> 
 
     <div class="col-xs-4 panel panel-success item"> 
 
     <div class="panel-heading">Third panel</div> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

View on JS Bin

Answer 1

私は"Sort Tables" exampleに基づいて、itemPathではなくcontainerPathを使用することをお勧め。

ドキュメントは私にとっては少し怪しいです。 itemPathは「アイテムとそのサブコンテナの間の正確なCSSパス」となっています。しかし、コンテナとそのアイテムの間のCSSパスであると思われます。それはcontainerPathが定義するものです。

プレースホルダ要素にブートストラップスタイルを適用するために、placeholderオプションも追加しました。

$(".items-container").sortable({ 
 
    containerSelector: ".items-container", 
 
    itemPath: "> .row", 
 
    itemSelector: ".item", 
 
    placeholder: '<div class="col-xs-4 panel placeholder"/>' 
 
});

.row .dragged { 
 
    position: absolute; 
 
    opacity: 0.5; 
 
    z-index: 2000; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script> 
 

 
<div class="container"> 
 
    <div class="items-container"> 
 
    <div class="row"> 
 
     <div class="col-xs-4 panel panel-danger item"> 
 
     <div class="panel-heading">First panel</div> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div> 
 
     </div> 
 
     <div class="col-xs-4 panel panel-warning item"> 
 
     <div class="panel-heading">Second panel</div> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div> 
 
     </div> 
 
     <div class="col-xs-4 panel panel-success item"> 
 
     <div class="panel-heading">Third panel</div> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>