draggable.coffee

# Если используется turbolink, запускаем скрипт после каждого обновления страницы
$(document).on 'turbolinks:load', ->
  class Draggable
    constructor: ->
      @drag_element = null
      @source_element = null
      # Добавляем курсор с рукой для всех элементов с тэгом drag
      # .grag { cursor: -webkit-grab }
      $('[drag]').addClass('grab')

      $(document).on 'mousedown', (e) ->
        target = @source_element = $(e.target)
        if target.attr('drag') != undefined
          # Меняем курсор нна сжатую руку элементу, который будет перемещаться
          # .grabbing { cursor: -webkit-grabbing }
          @source_element.addClass('grabbing')
          e.preventDefault()
          if target.attr('drag').length > 0
            # если атрибут drag содержит селектор, то будем перемещать элементы по нему
            @drag_element = $(target.attr('drag'))
          else
            # если drag пустой, перемещаем сам элемент
            @drag_element = target

          @init_x = @drag_element.offset().left - e.pageX
          @init_y = @drag_element.offset().top - e.pageY

      $(document).on 'mouseup', ->
        if @drag_element
          # Убираем стиль курсора - grabbing
          @source_element.removeClass('grabbing')
          @drag_element = null

      $(document).on 'mousemove', (e) ->
        # Если нажата левая кнопка мыши и элемент захвачен, то перемещаем его
        if @drag_element and e.buttons == 1
          @drag_element.offset {top: e.pageY + @init_y, left: e.pageX + @init_x}

  draggable = new Draggable