Insertbefore Error Demo

cannot read property 'insertbefore' of null at _rearrange at _mouseDrag + Jquery UI

by Shrikrishna Gupta

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<p>Multi-select Drag</p>
<p>
  <kbd>Click</kbd> to select individual items<br />
  <kbd>Ctrl + Click</kbd> to select multiple items
</p>
<br />
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
<ul>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>

CSS

ul {
  border: 1px solid Black;
  width: 200px;
  height: 200px;
  display: inline-block;
  vertical-align: top
}

li {
  background-color: Azure;
  border-bottom: 1px dotted Gray
}

li span.psudeoListItem {
  display: block;
  border-bottom: 1px dotted Gray
}

li.selected {
  background-color: GoldenRod
}

JavaScript

$("ul").on('click', 'li', function(e) {
  if (e.ctrlKey || e.metaKey) {
    $(this).toggleClass("selected");
  } else {
    $(".selected").removeClass('selected');
    $(this).addClass("selected");
  }
}).sortable({
  connectWith: "ul",
  delay: 150,
  revert: 0,
  helper: function(e, item) {
    if (!item.hasClass('selected')) {
      item.addClass('selected').siblings().removeClass('selected');
    }
    var elements = item.parent().find('.selected').clone();
    item.data('multidrag', elements).siblings('.selected').remove();
    var helper = $('<li/>');
    if (elements.length > 1) {
      helper.append(elements.length + " Items");
    } else {
      helper.append("1 Item");
    }
    return helper.position({
      of: e
    });
  },
  stop: function(e, ui) {
    console.log("Running Stop", ui.item);
    var elements = ui.item.data('multidrag');
    console.log("Elements", elements);
    elements.insertAfter(ui.item);
    ui.item.remove();
  }
});