Sortable Divider

Sortable Divider

Here's the dilemma. I have a sortable list that works perfectly. I want to add a draggable divider (like a styled hr tag) in the sortable list. So this divider can be moved between sortables but not part of them. This would not be part of the sortable accepted items. This is what I've been playing with. It sorta works and the helper get appended after the closest element, but the style of the helper gets thrown off as is placed wrong. Any thoughts of an easier way?

  2. $('.hr').draggable({
  3. containment: 'parent',
  4. axis: 'y',
  5. zIndex: 999999,
  6. start: function( event, ui ) {
  7. //ui.helper.detach();
  8. },
  9. stop: function( event, ui ) {
  10. var elements = $('.sortables);
  11. var target = ui.offset.top;
  12. var closestEl;
  14. elements.each(function(index, element) {
  15. el = elements.eq(index);
  16. id = elements.eq(index).attr('id');
  17. if(el.offset().top < target){
  18. closestEl = id;
  19. }
  20. });
  21. //alert(ui.helper.html());
  22. //ui.helper.detach();
  23. $('#' + closestEl).after(ui.helper);
  24. //alert(closestEl);
  25. //$('.marker-wrap').draggable();
  26. }
  27. });