I have a grid of left floated (float:left) images and an user can drag any image and drop it in a 'droppable', the images after the dragged image fills the vacated space, but it's very abrupt, I would like to ease the movement of images a bit.
Is it possible with css transition ?
HTML
<section id="basket">
<!--A sortable widget -jquery.ui-->
<ul id="sortable">
</ul>
</section>
<!--Main content - image grid-->
<section class="col s12">
<figure class="left draggable"> <img src="imges/1.jpg' ?>"> </figure>
<figure class="left draggable"> <img src="imges/1.jpg' ?>"> </figure>
<figure class="left draggable"> <img src="imges/1.jpg' ?>"> </figure>
<figure class="left draggable"> <img src="imges/1.jpg' ?>"> </figure>
<figure class="left draggable"> <img src="imges/1.jpg' ?>"> </figure>
<figure class="left draggable"> <img src="imges/1.jpg' ?>"> </figure>
</section>
<!--Main content - image grid end-->
CSS
.left {
float: left !important;
}
#basket {
position: fixed;
left: 20px;
top: 10%;
width: 200px;
Height: 200px;
border: 1px solid #B0B5BF;
background-color: #FFF;
}
Javascript
$( document ).ready ( function ( ) {
$ ( "#sortable" ).sortable ( );
$ ( ".draggable" ).draggable ( {
revert : "invalid", cursor: "grabbing"
} );
$ ( "#basket" ).droppable ( {
drop: function ( event, ui ) {
var $sortable = $ ( this ).children ( )[0];
ui.draggable.detach ( ).appendTo ( $( '<li></li>' ).appendTo( $sortable ) );
},
activeClass: "z-depth-1"
} );
} );
So, for example if I remove the <figure class="left draggable"> <img src="imges/1.jpg' ?>"> </figure> by draggin it to the #basket and jQuery.detach() then the remaining <figure> should ease in to their respective new positions. Since all the <figure> are floated elements, I think simple transition isn't working.
