ie8 sortable

HTML

<script src="http://localhost:3000/assets/geomicons-used.png"></script>
<div id='mouse-display'>Mouse is UP</div>

<div class="pages-form-container">
  <!-- = render :partial => "form_elements/modify_forms" -->
  <h3>Pages</h3>
  <div class="btn preview">
    <a href="/DisplayPage?srv=KS000c29724a167--2TQMI15-gQ2-U" target="_blank">Preview</a>
  </div>
  <div class="btn rearrange">
    <a>Rearrange Order</a>
  </div>
  <div class="empty-page-element" style="display:none;">Add Page Element</div>
  <ul class="empty-pages-data ui-sortable">
    &nbsp;
  </ul>
  <ul class="page-elements ui-sortable">
    <div class="pages-page" data-order="1" style="margin-bottom: 0;">
      <li class="page-title">
        <!-- = link_to(page.name + " - (#{page.order})", @edit_mode ? edit_page_path(page): page_path(page)) -->
        <div class="element-data" data-attribute-id="KS000c29724a16-u-2TQMP57-gYm-U" data-form-element-id="KS000c29724a16-u-2TQMP57-gYm-U" data-order="1" data-orderable-type="Page" data-question-type="undefined">
          <h3>
            <a class="element-name" href="/pages/KS000c29724a16-u-2TQMP57-gYm-U/edit" title="Name">
              Initial Pageg
            </a>
          </h3>
          <div class="element-styles-events">
            <span class="label styles" data-content="&lt;ul&gt;
  &lt;li&gt;
    &lt;strong&gt;
      Page
    &lt;/strong&gt;
    =&amp;gt; background: yellow;
  &lt;/li&gt;
&lt;/ul&gt;" onclick="location.href='/pages/KS000c29724a16-u-2TQMP57-gYm-U/edit#style-panel'" rel="popover" data-original-title="Styles">
              Style
            </span>
          </div>
          <div class="element-action-group">
            <span class="edit"><a href="/pages/KS000c29724a16-u-2TQMP57-gYm-U/edit" alt="Edit" title="Edit">Edit</a></span>
            <span class="add"><a href="/pages/KS000c29724a16-u-2TQMP57-gYm-U/clone?order_position=1000" alt="Clone" title="Clone">Clone</a></span>
            <span class="delete"><a...

CSS

.clearfix {
  zoom: 1; }
  .clearfix:before, .clearfix:after {
    display: table;
    content: "";
    zoom: 1; }
  .clearfix:after {
    clear: both; }

.fixed-container {
  width: 940px;
  margin-left: auto;
  margin-right: auto;
  zoom: 1; }
  .fixed-container:before, .fixed-container:after {
    display: table;
    content: "";
    zoom: 1; }
  .fixed-container:after {
    clear: both; }

html, body {
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  line-height: 1;
  font-family: inherit; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

ol, ul {
  list-style: none; }

q:before, q:after {
  content: ""; }

blockquote:before, blockquote:after {
  content: ""; }

html {
  overflow-y: scroll;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

a:focus {
  outline: 0; }
a:hover, a:active {
  outline: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display: block; }

audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

audio:not([controls]) {
  display: none; }

sub {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0;
  -ms-interpolation-mode: bicubic; }

button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle; }

button, input {
  line-height: normal;
  *overflow: visible; }

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

button {
  cursor:...

JavaScript

function SortableHandler(move_items_path, connectWith) {
  var self = this;

  this.move_items_path = move_items_path;
  this.moved_item_order = null;
  this.dragged_item_type = null;
  this.find_next_node = function(node) {
    console.log('find next node');
    console.log(node.parent());
    before_order_position = null;
    done = false;
    found_next = false;
    var i = 0;
    while (!done) {
      if (node.next().length != 0 && node.next().attr("data-order") ) {
        // Next Node found with data order attribute attached
        // Use that Node
        done = true;
        found_next = true;
        break;
      }
      else
      {
        //  Check if we are at the page level
        if(node.parent().hasClass("pages-form-container"))
        {
            console.log('on page');
          // We are on a page node
          if (node.next().length != 0 && node.next().hasClass("empty-page-element") && node.next().next().next().attr("data-order"))
          {
            // Page element has a sibling with a data order attached
            // Use that Node
              node = node.next().next();
              found_next = true;

          }
          else
          {
            // Page in the last position use last element for order info
            found_next = false;
          }

          // Return as can go no higher since we are at a page element.
          done = true;
          break;
        }

      }

      console.log('climbing tree');
      node = node.parent();

    }

    if (found_next)
    {
        console.log('done and found');
      before_order_position = parseInt(node.next().find(".element-data").attr("data-order"), 10);

    // there is no next node anywhere in the tree
    }
    console.log(before_order_position);
    if (isNaN(before_order_position) || before_order_position == null)
    {
        console.log('NaN or null');
      last_element = $(".element-data").last();
      if (last_element.length == 0) 
       ...