Jquery sortable hierarchyrequesterror - item disappears
<p>I'm trying to implement ui allowing user to drag/drop nest groups and move items to it but no matter what i try there is still error <em>"Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent."</em></p>

<p>Here is my js code (sortable settings):</p>

<pre><code>$("#container").find(".items, .group").sortable({
  connectWith: ".items, .group",
  tolerance: "touch",
  helper: 'clone',
  opacity: 0.01,
  placeholder: {
    element: function (clone, ui) {
        return $('&lt;span class="placeholder"&gt;' + clone[0].innerHTML + '&lt;/span&gt;');
    },
    update: function () {
        return;
    }
  },
  sort: function (event, ui) {
  /* check if placeholder position is 0 add back placeholder */
    var pos = ui.placeholder.position();
    if (pos.left == 0 &amp; pos.top == 0) {
        $(ui.item).before(ui.placeholder);
    }
  },
  stop: function (event, ui) {

  },
  receive: function (ev, ui) {
    if (ui.item == $(this)) {
        ui.sender.sortable("cancel");
    }
  }
});
</code></pre>

<p>You can try it <a href="https://jsfiddle.net/mczdc7k9/" rel="nofollow noreferrer">here (jsfiddle)</a>. If you move group out of container element it will disappear and there will be that error in js console.</p>