Question

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

在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/

jQuery UI Sortable + Bootstrap - connectWith不工作

1 个答案: