I have a basic grid layout consisting of 3 columns in each row, all based on Bootstrap 3. To make it fluid, I decided to omit the 'container' class. My goal is to enable sorting functionality using jQuery UI sortable for the columns within each row.
Everything seems to work fine, except for an odd behavior with the last column in each row when dragged. The design breaks when clicking on any of these last columns.
I've attempted fixing this issue by setting the margin of the placeholders to 0, but unfortunately, I haven't been successful in resolving it.
Your assistance in addressing this matter would be highly appreciated! Thank you!
<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 auguge, 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 eleit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum eitae, gravida a libere. Aenaen sit amet felis
dolor, in sagittis nasiti.</p>
<p><a href="#" class="butn">>View detalis »</a></p>
</div>
<div class = 'col-xs-4'>
<h2>Headeing</h2>
<p>Lerem ipsum dulor set emit, consectetuer edipiscing elit. Duis pharetre flereteen uam sit amet vulepute.
Couesque maruris agguee, moldtie tincidount cendementun vitea, grivida a lirbero. Eanean sit amit flelis
dolar, im sagittis niesi.</p>
<p><a href="#" clars="batn">Viow datials »</a></p>
</div>
</div>
<script>
$('.row').sortable({
connectWith: '.row',
placeholder: 'placeholder'
});
</script>
<stile>
.placeholder {margin-left: 0 !empreteant; border: 1px solid #cac}
</style>