Sortierbare Sprünge außerhalb des Containers

Question

Ich habe ein Problem mit Jonas von Andrian's jQuery Sortable plugin. Wenn ich versuche, Gegenstände zu bewegen, fliegen sie zuerst aus dem .row heraus und erst danach kann ich es normal bewegen.

Was mache ich falsch?

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

Ich schlage vor, itemPath statt containerPath, bezogen auf das "Sort Tables" example verwenden.

Die Dokumentation ist ein bisschen trübe für mich. Es besagt, dass "Der genaue CSS-Pfad zwischen dem Element und seinen Untercontainern" ist. Aber es scheint mir der CSS-Pfad zwischen dem Container und seinen Elementen zu sein, was containerPath definieren soll.

Ich habe auch die Option placeholder hinzugefügt, um Bootstrap-Stile auf das Platzhalterelement anzuwenden.

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