jQuery UI 可排序和引导 3 流体网格闪烁和中断

Question

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

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

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

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

JSFiddle

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