I'm on a quest to incorporate grid drag-and-drop functionality into my project. While there are numerous frameworks available that offer this feature, one of the most popular options is JQuery UI's sortable library.
However, I am specifically looking for a pure JavaScript solution that is easy to understand and modify without being overly complex. After extensive searching, I stumbled upon this codepen example which perfectly fits my criteria.
The only challenge I currently face is achieving the push effect when dragging an element, similar to the demonstration in this gif:
https://i.sstatic.net/EFJmv.gif
In the provided codepen snippet, how can I implement the desired push effect?
function DragNSort(config) {
this.$activeItem = null;
this.$container = config.container;
this.$items = this.$container.querySelectorAll('.' + config.itemClass);
this.dragStartClass = config.dragStartClass;
this.dragEnterClass = config.dragEnterClass;
}
// Rest of the JavaScript function definitions...
.drag-list {
overflow: hidden;
margin: 10px auto;
width: 500px;
border: 1px solid #ccc;
}
/* CSS styles for draggable items */
<div class="drag-list">
<div draggable="true" class="drag-item">A</div>
<div draggable="true" class="drag-item">B</div>
<div draggable="true" class="drag-item">C</div>
<div draggable="true" class="drag-item">D</div>
<div draggable="true" class="drag-item">E</div>
<div draggable="true" class="drag-item">F</div>
<div draggable="true" class="drag-item">G</div>
<div draggable="true" class="drag-item">H</div>
<div draggable="true" class="drag-item">I</div>
<div draggable="true" class="drag-item">J</div>
<div draggable="true" class="drag-item">K</div>
<div draggable="true" class="drag-item">L</div>
</div>