У меня есть сетка левых плавающих (плавающих: левых) изображений, и пользователь может перетаскивать любое изображение и помещать его в «выпадающее», изображения после перетаскивания заполняют освободившееся пространство, но это очень резко, я хотел бы облегчить движение изображений немного.
Возможно ли с переходом css?
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"
} );
} );
Так, например, если я удалю <figure class="left draggable"> <img src="imges/1.jpg' ?>"> </figure>, перетащив его на #basket и jQuery.detach(), тогда оставшиеся <figure> должны занять свои новые позиции. Поскольку все <figure> являются плавающими элементами, я думаю, что простой переход не работает.
