Question

我有一个基于Bootstrap 3的基本3 x 3网格布局。我需要它是流畅的，因此我省略了'容器'类。我需要使用jquery ui可排序功能对行内的列进行排序。

一切正常，但每行的最后一列在拖动时表现得很糟糕。单击任何最后一列时，设计会中断。

我尝试过将占位符边距设置为0的解决方案，但我似乎无法使其工作。

任何帮助将不胜感激！谢谢！

<div class = 'row'>
        <div class = 'col-xs-4'>
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
              dolor, in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
        <div class = 'col-xs-4'>
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
              dolor, in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
        <div class = 'col-xs-4'>
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
              dolor, in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
    </div>
    <div class = 'row'>
        <div class = 'col-xs-4'>
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
              dolor, in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
        <div class = 'col-xs-4'>
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
              dolor, in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
        <div class = 'col-xs-4'>
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
              dolor, in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
    </div>
    <div class = 'row'>
        <div class = 'col-xs-4'>
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
              dolor, in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
        <div class = 'col-xs-4'>
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
              dolor, in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
        <div class = 'col-xs-4'>
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
              dolor, in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
    </div>



<script>
$('.row').sortable({
  connectWith: '.row',
  placeholder: 'placeholder'
});
</script>
<style>
.placeholder {margin-left: 0 !important; border: 1px solid #ccc}
</style>

Answer 1

尝试使用以下设置初始化可排序小部件：

$('.row').sortable({
    helper: 'clone',
    placeholder: 'col-xs-4'
});

http://jsfiddle.net/0bzwc61d/1/

jQuery UI可排序和Bootstrap 3流体网格闪烁和破碎

1 个答案: