jQuery UI Sortable + Bootstrap - connectWith 不工作

Question

我正在为我的网站构建一个图像工具。用户可以在照片可见和照片隐藏的区域之间对照片进行排序。

http://jsfiddle.net/2r6n9u8m/

在 jsfiddle 中它正在工作。

但在我的代码中，它不适用于我的网页。

当我排除css和js时......当我排除bootstrap.css时它正在工作......但我仍然不知道这个问题。

<div id="photos-show" class="connectedSortable">


        <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 1340782121.06.jpg">                           
            <img class="img-thumbnail img-reponsive" src="/1340782121.06.jpg" alt="Foto von dem Inserat" >
        </div>


        <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 1340782104.56.jpg">                           
            <img class="img-thumbnail img-reponsive" src="/1340782104.56.jpg" alt="Foto von dem Inserat" >
        </div>


        <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 1340782111.74.jpg">                           
            <img class="img-thumbnail img-reponsive" src="/1340782111.74.jpg" alt="Foto von dem Inserat" >
        </div>                      
</div>

<div class=" col-lg-2 col-md-2 col-sm-12 col-xs-12">                            
        <h4>More pictures?</h4>
        <button type="button" class="btn btn-danger">Click here</button>
</div>



<div class="row">   
        <h2>Photos hidden</h2>
    <div id="photos-hidden" class="connectedSortable">              

        <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 1401025214.2901.jpg">                         
            <img class="img-thumbnail img-reponsive" src="/1401025214.2901.jpg" alt="Foto von dem Inserat" style="opacity: .5; filter:Alpha(Opacity=50);">
           </div>


        <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 1401025216.7008.jpg">                         
            <img class="img-thumbnail img-reponsive" src="/1401025216.7008.jpg" alt="Foto von dem Inserat" style="opacity: .5; filter:Alpha(Opacity=50);">
          </div>

    </div>
</div> 

Answer 1

做了一些修复，请检查。

placeholder: "col-xs-2 xs-placeholder",

和

start: function() {
   $('.xs-placeholder').css('height', $('.connectedSortable .col-xs-2').eq(0).height());
}

还将 col-md-2 更改为 col-xs-2。

http://jsfiddle.net/2r6n9u8m/2/