How to save the result of drag and drop

Question

This is the HTML code. I want to change the positions of the images and then save the result.I don't know how and where can I save the new position of the images. Please help

<div class="row">
            <div class='list-group gallery'>
                @if($images->count())
                    @foreach($images as $image)
                    <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3 box' draggable="true">
                        <img alt="" src="{{ url('/images/'.$image->product_id.'/'.$image->filename) }}" width="500" height="500"/>
                        <form action="{{ url('/destroy',$image->id) }}" method="POST">
                            <input type="hidden" name="_method" value="delete">
                            {!! csrf_field() !!}
                            <button type="submit" class="close-icon btn btn-danger" onclick="return confirm('Da li ste sigurni da želite da izbrišete ovu sliku?')"><i class="glyphicon glyphicon-remove"></i></button>
                        </form>
                    </div> 
                    @endforeach
                @else
                <img class="img-center" alt="" src="{{ url('/images/'.'blank.jpg') }}" width="500" height="500"/>
                @endif
            </div> <!-- list-group / end -->
    </div>

This is the JS code

 document.addEventListener('DOMContentLoaded', (event) => {
    
    function handleDragStart(e) {
      this.style.opacity = '0.4';
      dragSrcEl = this;
    
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text/html', this.innerHTML);
    }
    
    function handleDragEnd(e) {
      this.style.opacity = '1';
    
      items.forEach(function (item) {
        item.classList.remove('over');
      });
    }
    
    function handleDragOver(e) {
      e.preventDefault();
      return false;
    }
    
    function handleDragEnter(e) {
      this.classList.add('over');
    }
    
    function handleDragLeave(e) {
      this.classList.remove('over');
    
    }
    
    function handleDrop(e) {
      e.stopPropagation();
    
      if (dragSrcEl !== this) {
        dragSrcEl.innerHTML = this.innerHTML;
        this.innerHTML = e.dataTransfer.getData('text/html');
      }
    
      return false;
    }
    
    let items = document.querySelectorAll('.row .box');
    items.forEach(function(item) {
      item.addEventListener('dragstart', handleDragStart);
      item.addEventListener('dragover', handleDragOver);
      item.addEventListener('dragenter', handleDragEnter);
      item.addEventListener('dragleave', handleDragLeave);
      item.addEventListener('dragend', handleDragEnd);
      item.addEventListener('drop', handleDrop);
    });
    });

How to save the result of the drag and drop? After I refresh the page, the change is not saved