5

我有一个基于 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>
4

1 回答 1

2

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

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

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

于 2015-04-06T15:31:53.187 回答