Sortable - code helper

xxxxxxxxxx
 
​
<h2>
  Testing Sortable Items
</h2>
<div  data-mdb-sortable = "sortable"  id = "sortable" class='sortable-list' >
    <div  id = "item1" class='sortable-item' >Item 1</div>
    <div  id = "item2" class='sortable-item' >Item 2</div>
    <div  id = "item3" class='sortable-item' >Item 3</div>
    <div  id = "item4" class='sortable-item' >Item 4</div> 
    <div  id = "item5" class='sortable-item' >Item 5</div>     
</div>

xxxxxxxxxx
 
.sortable-item { display: block; padding: 10px; border: 1px solid black; margin: 5px; background-color: #AAD7FF; width: 200px; }

xxxxxxxxxx
 
    const draggableItem1 = document.getElementById('item1'); 
    draggableItem1.addEventListener('end.mdb.sortable', (e) => alert('Item 1 was moved')); 
    
    const draggableItem2 = document.getElementById('item2');    
    draggableItem2.addEventListener('move.mdb.sortable', (e) => console.log( 'Item 2 was moved' )); 
    
    const draggableItem3 = document.getElementById('item3'); 
    draggableItem3.addEventListener('move.mdb.sortable', function() { alert( 'Item 3 was moved' ); }); 
                        
    const draggableItem4 = document.getElementById('item4'); 
    draggableItem3.addEventListener('move.mdb.sortable', function() { console.log( 'Item 4 was moved' ); }); 
   
    const draggableItem5 = document.getElementById('item5'); 
    draggableItem3.addEventListener('end.mdb.draggable', function() { console.log( 'Item 5 was moved' ); }); 
    

Console errors: 0