sortable

by gotwo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<ul>
<li>every collection and item is sortable</li>
<li>but "long text" items of collection 2 and higher can't insert before item12, why?</li>
</ul>
<input type="submit" value="short text" onclick="init(false)"/>&nbsp;
<input type="submit" value="long text" onclick="init(true)"/><br /><br />
<div id="itemtext" class="ui-widget-content"></div>

CSS

html, body {
  font-family: "Arial", sans-serif;
}
.collection_content {
  padding-bottom: 2px;   /* workaround for filling empty content */
  padding-left: 10px;
}

JavaScript

init(true);

function init (bLongText) {
  var i1, i2, sHtml = "", sText;

  if (bLongText) sText = ", this is a loooooooooooooooooooooooooooooooooooong text"
  else sText = ", short text";

  for (i1 = 1; i1 < 8; i1++) {
    sHtml += ' \
    <div id="collhead_' + i1 + '" class="collection_head"> \
      <span onclick="SwitchHide(' + i1 + ')">#hide#</span> \
      collection ' + i1 + ' \
      <div id="collcontent_' + i1 + '" class="collection_content">';
    for (i2 = 0; i2 < 10; i2++) {
      sHtml += '<div id="item' + i1 + '' + i2  + '" class="collection_item">item' + i1 + '' + i2 + sText + '</div>';
    }
    sHtml += '</div></div>';
  }
  document.getElementById("itemtext").innerHTML = sHtml;

  for (i1 = 0; i1 < 8; i1++) {
    if (i1 !== 1 && i1 !== 7)
      SwitchHide(i1);
  }

  $("#itemtext")
    .resizable({
      handles: 'n,e'
    })
    .sortable({
      items: ".collection_head",
      cursor: "move",
      axis: "y"
    });

  $(".collection_content")
    .sortable({
      connectWith: ".collection_content",
      cursor: "move",
      axis: "y"
    });
}

function SwitchHide (i) {
  var oHead    = $("#collhead_"    + i);
  var oContent = $("#collcontent_" + i);
  if (!oHead.hasClass("collapsed")) {
    oContent.slideUp();
    oHead.addClass("collapsed");
  } else {
    oContent.slideDown();
    oHead.removeClass("collapsed");
  }
}