jQuery可排序 - 设置哪些div包含在其父容器中

Question

我正在使用jQuery的可排序函数来允许用户重新排列div的顺序。当用户点击该按钮时，出现一个弹出的div。

目前，“已经在那里的div”和“弹出格”不能被移出其容器由于线路containment: 'parent'

如何允许弹出DIV被移出其容器，只是不是已经在那里的divs？

$("#click").on("click", function() { 
 
    $("#sortable1").show(); 
 
}); 
 

 
$('#sortable1, #sortable2').sortable({ 
 
    axis: 'y', 
 
    connectWith: '.first', 
 
    containment: 'parent' 
 
});

.container { 
 
    position: absolute; 
 
    margin: 0 auto; 
 
    left: 0; 
 
    right: 0; 
 
    top: 13%; 
 
    width: 85%; 
 
} 
 

 
div.div { 
 
    border: 1px solid; 
 
    margin-top: 7.5px; 
 
    margin-bottom: 7.5px; 
 
} 
 

 
.popup { 
 
    width: 50%; 
 
    left: 0; 
 
    right: 0; 
 
    top: 20%; 
 
    margin: 0 auto; 
 
    z-index: 1; 
 
    position: absolute; 
 
    background: #fff; 
 
    border: 1px solid; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div id="sortable1" style="display: none;"> 
 
    <div class="popup"> 
 
    <h2>RED</h2> 
 
    <p>When his peaceful life is threatened by a high-tech assassin, former black-ops agent Frank Moses reassembles his old team in a last ditch effort to survive and uncover his assailants.</p> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 

 
    <button id="click">Click me</button> 
 
    <br> 
 
    <br> 
 

 
    <div id="sortable2" class="first"> 
 

 
    <div class="div"> 
 
     <h2>Deep Impact</h2> 
 
     <p>Unless a comet can be destroyed before colliding with Earth, only those allowed into shelters will survive. Which people will survive?</p> 
 
    </div> 
 

 
    <div class="div"> 
 
     <h2>The Adjustment Bureau</h2> 
 
     <p>The affair between a politician and a contemporary dancer is affected by mysterious forces keeping the lovers apart.</p> 
 
    </div> 
 

 
    <div class="div"> 
 
     <h2>Lord of the Flies</h2> 
 
     <p>Stranded on an island, a group of schoolboys degenerate into savagery.</p> 
 
    </div> 
 
    </div> 
 

 
</div>

的jsfiddle：https://jsfiddle.net/o0exme4f/1/

Answer 1

这不会工作，你期待的方式。

到这里看看：https://jsfiddle.net/o0exme4f/2/

的JavaScript

$(function() { 
    $("#click").on("click", function() { 
    $("#sortable1").show(); 
    }); 

    $("#sortable2").sortable({ 
    axis: 'y', 
    containment: 'parent', 
    items: "> div", 
    update: function(e, ui) {}, 
    receive: function(e, ui) { 
     console.log("Receiving item: ", ui.item); 
     ui.item.attr("style", "").removeClass("popup").addClass("div"); 
    } 
    }); 
    $("#sortable1").sortable({ 
    connectWith: '.first' 
    }); 
}); 

当接收到新的项目，将其更新为像其他项目。一些造型造成它不能很好地与其他元素流动。