I am working with a grid made up of 32x32 slots. Link to Grid Image
How can I dynamically add or remove grid slots to fill the element without cutting off halfway through a slot/tile?
Below is the code snippet:
<style>
.drag-item {
position: absolute;
background-image: url('assets/images/objects/desk-1.png');
background-size: 32px;
width: 32px; height: 32px;
cursor: move;
}
.drop-target {
position: absolute;
width: 480px; height: 480px;
border:dashed 1px orange;
background: whitesmoke url('assets/images/objects/grid_64.png') repeat;
background-size: 32px 32px;
}
</style>
<div class="panel-body" style="width: 520px; height: 520px;">
<div class="drop-target">
<div class="drag-item"></div>
<div class="drag-item"></div>
<div class="drag-item"></div>
<div class="drag-item"></div>
<div class="drag-item"></div>
</div>
</div>