jquery touch punch not working

Question

I'm trying to make my drag and drop functionality work on phones. So I'm trying to use jquery touch punch but it doesn't seem to be enabling the drag and drop on the phone.

Here's my code. I put jquery.ui.touch-punch.min.js in the /app/assets/javascripts/ folder.

=render :layout => 'shared/form_layout' do
  .row-fluid
    .col-xs-12.text-center#new-image
      %h1 Edit Collection
    = form_for @collection, :html => { :method => :put, :multipart => true } do |f|
      .row-fluid
        %label{for: "image"} Drag to Reorder:
        %script{:src => "http://code.jquery.com/jquery-1.7.2.min.js"}
        %script{:src => "http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"}
        %script{:src => "/app/assets/javascripts/jquery.ui.touch-punch.min.js"}
        %ul.list-inline.form-group.edit-grid.clearfix#collectiondrag{"data-update-url" => sort_collections_url}
          - @images.each do |image|
            %li{class: "image", id: "image_#{image.id}"}
                .edit-item{:style => "background-image: url(#{image.photo.url})"}
        %hr.m-y-20
        .text-center
          = f.submit "Save Changes", class: "button btn btn-primary w-100", id: "sort_collection"

Answer 1

Here's the steps I took to get Touch Punch to work:

• Get your website working exactly as you want it on desktop first. Touch Punch does nothing by itself, it simply extends jQuery UI.
• Download the Touch Punch javascript and include it in your Rails app. /app/assets/javascripts/ will do, but I prefer putting third-party javascripts in /vendor/assets/javascripts/.
• Include the file in your application.js file, after all of your jquery and jquery-ui requires.

That should get you up and running!