jQuery UI Sortable ve Bootstrap 3 akışkan ızgarası titriyor ve kırılıyor

Question

Bootstrap 3 temelli bir 3 x 3 ızgara düzenim var. Sıvı olması gerekiyor, dolayısıyla 'container' sınıfını bıraktım. Satır içindeki sütunlara jquery ui sıralanabilir işlevini kullanarak sıralanabilir olması gerekiyor.

Her şey iyi çalışıyor, ancak her satırın son sütunu sürüklendiğinde gizlice davranıyor. Son sütunlardan herhangi birine tıklandığında tasarım bozulur.

Yer tutucu marjını 0 olarak ayarlamanın çözümünü denedim, ancak çalışmasını sağlayamıyorum.

Herhangi bir yardım büyük takdir! Teşekkürler!

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

<div class = 'row'> 
    <div class = 'col-xs-4'> 
     <h2>Heading1</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>Heading2</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>Heading3</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>Heading4</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>Heading5</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>Heading6</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>Heading7</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>Heading8</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>Heading9</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> 

HTML bu

http://jsfiddle.net/WwFuS/32/

JS

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

deneyin

Answer 2

aşağıdaki ayarlarla sıralanabilir widget'ı başlatmak için deneyin: Benim krom On

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

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