How do I change the placeholder like as the elements replace each other place?
<p>How do I change the placeholder like as the elements replace each other place.</p>

<p>Please see the example</p>

<p><a href="https://jsfiddle.net/98h31o9v/11/" rel="nofollow">https://jsfiddle.net/98h31o9v/11/</a></p>

<p><strong>JavaScript</strong></p>

<pre><code>indexOfCell = 0;
</code></pre>

<blockquote>
  <p>add boxes to #div element</p>
</blockquote>

<pre><code>$('#add_box').on('click', function() {
  var cell = $("&lt;div&gt;&lt;/div&gt;");
  var elementObj = cell.get(0);
  $('#div').append(elementObj);
  cell.addClass('content-box').attr('id', 'box_' + indexOfCell);
  cell.text(indexOfCell);
  indexOfCell += 1;
  console.log(elementObj);
  $(cell).draggable({
    helper: 'original',
    zIndex: 10001,
    start: function(event, ui) {
      if ($(this).data('placeholder') === undefined) {
        $(this).data('placeholder', createPlaceholder($(this)));
      }
      setPlaceHolder($(this).data('placeholder'), $(this));
      $(this).after($(this).data('placeholder'));
    },
    stop: function(event, ui) {
      $(this).css('left', $(this).data('placeholder').css('left'));
      $(this).css('top', $(this).data('placeholder').css('top'));
      $(this).data('placeholder').after($(this));
      $(this).data('placeholder').detach();
    }
  });

  $(cell).droppable({
    tolerance: 'intersect',
    greedy: true,
    over: function(event, ui) {
      replaceTwoItem(ui.draggable.data('placeholder'), $(this));
    }
  });
</code></pre>

<blockquote>
  <p>create placeholder</p>
</blockquote>

<pre><code>  function createPlaceholder(that) {
    var className = that.attr('class');
    var placeholder = $(document.createElement(that.get(0).nodeName))
      .addClass(className || className + " ui-sortable-placeholder")
      .removeClass("ui-sortable-helper").css({
        background: 'yellow',
        border: '1px solid grey'
      });
    return placeholder;
  }
</code></pre>

<blockquote>
  <p>set the placeholder to cell</p>
</blockquote>

<pre><code>  function setPlaceHolder(placeholder, cell) {
    placeholder.css('width', cell.width());
    placeholder.css('height', cell.height());
    placeholder.css("display", 'block');
    placeholder.css('position', 'absolute');
    placeholder.css('top', cell.css('top'));
    placeholder.css('left', cell.css('left'));
  }
</code></pre>

<blockquote>
  <p>replace two item when drag</p>
</blockquote>

<pre><code>  function replaceTwoItem(itemFrom, itemTo) {
    var itemToInsert;
    var action;
    if (itemFrom.index() === 0) {
      itemToInsert = itemFrom.parent();
      action = "prepend";
    } else {
      itemToInsert = itemFrom.prev();
      action = "after";
    }
    itemTo.before(itemFrom);
    if (itemTo.get(0) != itemToInsert.get(0)) {
      if (action == 'prepend') {
        itemToInsert.prepend(itemTo);
      } else if (action == 'after') {
        itemToInsert.after(itemTo);
      }
    }
  }
});
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;button id="add_box"&gt;AddBox&lt;/button&gt;
&lt;div id="div"&gt;

&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.content-box {
    width: 100px;
    height: 100px;
    background: green;
    margin: 5px;
    float: left;
}
</code></pre>