<div id="drop-area" class="ui-sortable">

  <!-- <p id="drop-placeholder-text">Drop Advert Here To Begin</p> -->
</div>
<br>


<div class='tile'>
  <div>
    <img class='grid-image ui-draggable' src='https://placehold.it/100x100' alt=''>
    <p>title</p>
  </div>
  <br>
  <a href='#'>Publish</a>
  <a href='#'>Playlist</a>
</div>

<div class='tile'>
  <div>
    <img class='grid-image ui-draggable' src='https://placehold.it/200x200' alt=''>
    <p>title</p>
  </div>
  <br>
  <a href='#'>Publish</a>
  <a href='#'>Playlist</a>
</div>

<div class='tile'>
  <div>
    <img class='grid-image ui-draggable' src='https://placehold.it/300x300' alt=''>
    <p>title</p>
  </div>
  <br>
  <a href='#'>Publish</a>
  <a href='#'>Playlist</a>
</div>
<div class='tile'>
  <div>
    <img class='grid-image ui-draggable' src='https://placehold.it/400x400' alt=''>
    <p>title</p>
  </div>
  <br>
  <a href='#'>Publish</a>
  <a href='#'>Playlist</a>
</div>

$(document).ready(function() {
  $("#drop-area").droppable({
    drop: function(event, ui) {

            var spacer = "<div class='spacer'></div>";
      var clone = $(ui.draggable).clone();
      clone.addClass('.connectedSortable')
      clone.removeClass('.ui-draggable');

      $(this).append(clone);
      $(this).append(spacer);

    }
  });
  $(".ui-draggable").draggable({
    opacity: 1.0,
    helper: 'clone',
    revert: 'invalid'
  });

  $("#drop-area").sortable({
    axis: "x"
  });
  $("#drop-area").disableSelection();

});

if (clone.hasClass('dropped')) {
    return false;
  }
  clone.addClass('.connectedSortable').addClass('dropped');