ฉันมีตารางรูปภาพด้านซ้ายลอย (ลอย: ซ้าย) และผู้ใช้สามารถลากรูปภาพใดก็ได้และวางลงใน 'วางได้' รูปภาพหลังจากรูปภาพที่ลากจะเต็มพื้นที่ว่าง แต่มันกะทันหันมาก ฉันอยากจะบรรเทา ความเคลื่อนไหวของภาพเล็กน้อย
เป็นไปได้ไหมกับการเปลี่ยน 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-->
ซีเอสเอส
.left {
float: left !important;
}
#basket {
position: fixed;
left: 20px;
top: 10%;
width: 200px;
Height: 200px;
border: 1px solid #B0B5BF;
background-color: #FFF;
}
จาวาสคริปต์
$( 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> ทั้งหมดเป็นองค์ประกอบแบบลอย ฉันคิดว่าการเปลี่ยนผ่านแบบธรรมดาไม่ได้ผล
