Sortable items: side-by-side boxes with li items that are sortable and draggable

_view.html.haml

    .span6
     .dragging.connected{ 'data-slabel' => 'Personal Information' }
        %h4
          = link_to '#', class: 'add-all-fields floatright lightblue-btn tooltip-title', title:'Add All Questions' do
            = raw '→'
          = link_to '+', '#add-new-questions', class: 'add-new-question floatright green-btn tooltip-title', title:'Add New Question', role: 'button'
          Personal Information
          %span
            Drag or Double Click to Add
            = raw '→'
        %li Street Address
    .span6
      .sorting.connected{ 'data-slabel' => 'Personal Information' }
        %h4
          = link_to '-', '#', class: 'remove-all-fields floatright lightblue-btn tooltip-title', title:'Remove All'
          Personal Information
        %li First Name
        %li Last Name
        %li Email

sortable_creation.js.coffee

class SortableCreation
  # sortable creation form with drag/drop and sorting of items

  domclass =
    container: '.item-wrapper'
    parent:   '#item_id'

  constructor: (creation) ->
    @creation = creation
    @classes = domclass
    @init()

  matchHeights = ->
    # initially match heights of sortable boxes
    @wrapper = {}
    $("#{domclass.creation} .sorting").each ->
      @wrapper = buildWrapper $(@)
      setHeights @wrapper
      if @wrapper.sheight < @wrapper.dheight
        @wrapper.sorting.css 'height', @wrapper.dheight

  updateSortingHeight = (item) ->
    # update height of the sortable boxes to be equal
    @wrapper = buildWrapper item
    resetHeights @wrapper
    setHeights @wrapper
    if @wrapper.sheight < @wrapper.dheight
      @wrapper.sorting.css 'height', @wrapper.dheight
    else
      @wrapper.dragging.css 'height', @wrapper.sheight

  buildWrapper = (item) ->
    container = item.closest '.row-fluid'
    wrapper = {}
    wrapper.dragging = container.find '.dragging'
    wrapper.sorting  = container.find '.sorting'
    return wrapper

  resetHeights = (@wrapper) ->
    @wrapper.dragging.css 'height', 'auto'
    @wrapper.sorting.css 'height', 'auto'

  setHeights = (@wrapper)->
    @wrapper.dheight = @wrapper.dragging.height()
    @wrapper.sheight = @wrapper.sorting.height()

  updateHeight: (item) ->
    updateSortingHeight item

  setSortable: ->
    @creation.find('.connected').sortable
      connectWith: '.connected'
      placeholder: "placeholder"
      cursor: 'move'
      revert: true
      items: 'li'
      stop: (event, ui) ->
        updateSortingHeight ui.item
    .disableSelection()

  findSection = (item) ->
    return item.closest('.connected').data 'slabel'

  findDragging = (item) ->
    return item.closest('.row-fluid').find '.dragging'

  findItems: ->
    $(domclass.parent).find('.connected li').each ->
      li = $(@)
      question = {}
      question.self = li
      question.id = li.prop 'id'
      question.value = $.trim li.text()
      question.type = if li.closest('.connected').hasClass('sorting') then 'sorting' else 'dragging'
      question.section = findSection li
      question.parent = li.closest '.connected'
      item = new Question question

  init: ->
    @setSortable()
    @findItems()

class Question extends AdoptionCreation
  constructor: (question) ->
    @question = question
    @bindAll()

  bindAll: ->
    $('a.delete-question', @question.self).on 'click', @remove
    if @question.type == 'dragging'
      @question.self.on 'dblclick', @bindDblClick

  remove: (e) =>
    e.preventDefault()
    @question.self.slideUp()
    @updateHeight @question.self
    @question.parent.sortable 'refresh'

  bindDblClick: =>
    question = @question.self
    sorting = question.closest('.row-fluid').find '.sorting'
    sorting.append(question.detach()).sortable 'refresh'
    question.type = 'sorting'
    @updateHeight question

$ ->
  if $('#your_id').length > 0
    new SortableCreation($('#your_id'))