Saya memiliki kisi-kisi gambar melayang kiri (float:left) dan pengguna dapat menyeret gambar apa pun dan meletakkannya di 'yang dapat dijatuhkan', gambar setelah gambar yang diseret mengisi ruang kosong, tetapi sangat mendadak, saya ingin memudahkan pergerakan gambar sedikit.
Apakah mungkin dengan transisi 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;
}
skrip java
$( 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"
} );
} );
Jadi, misalnya jika saya menghapus <figure class="left draggable"> <img src="imges/1.jpg' ?>"> </figure> dengan menyeretnya ke #basket dan jQuery.detach() maka <figure> yang tersisa akan masuk ke posisi barunya masing-masing. Karena semua <figure> adalah elemen mengambang, menurut saya transisi sederhana tidak berfungsi.
