Sorry, I should have elaborated a little more Walter... I implemented Interact.js and used an example from a Drifting Ruby Episode... https://www.youtube.com/watch?v=fhnHA7PWq0g
Dragging is working but drop doesn't "look" to be firing... My form code currently is like this <script> var dragMoveListener; dragMoveListener = function(event) { var target, x, y; target = event.target; x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx; y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'; target.setAttribute('data-x', x); return target.setAttribute('data-y', y); }; window.dragMoveListener = dragMoveListener; interact('*[data-draggable="true"]').draggable({ inertia: false, autoScroll: true, onmove: dragMoveListener }); $(document).on('load', function(){ interact('#meal_items').dropzone({ accept: '*[data-draggable="true"]', overlap: 0.75, ondropactivate: function(event) {}, ondragenter: function(event) { event.target.classList.add('drop-target'); event.relatedTarget.classList.add('can-drop'); return $.get(event.relatedTarget.attributes['data-url'].value, { favorite: true }); }, ondragleave: function(event) { event.target.classList.remove('drop-target'); event.relatedTarget.classList.remove('can-drop'); return $.get(event.relatedTarget.attributes['data-url'].value, { favorite: false }); }, ondrop: function(event) {}, ondropdeactivate: function(event) { event.target.classList.remove('drop-active'); return event.target.classList.remove('drop-target'); } }); }); </script> <% if action_name == "new" %> <div class="page-title">Creating New Meal</div> <% else %> <div class="page-title">Editing Meal</div> <% end %> <div> <div class="col-sm-4 col-md-4"> <%= form_for @meal do |f| %> <% if @meal.errors.any? %> <div id="error_explanation"> <h3><%= pluralize(@meal.errors.count, 'error') %> prohibited this meal from being saved:</h3> <ul> <% @meal.errors.full_messages.each do |message| %> <li><%= message %></li> <% end %> </ul> </div> <% end %> <div> <table> <tr> <th align='left'>Name:</th> <td><%= f.text_field(:name) %></td> </tr> <tr> <th align='left'>Description:</th> <td><%= f.text_area(:description) %></td> </tr> <tr> <th align='left'>Available Daily:</th> <td><%= f.check_box(:available_daily, 'data-toggle' => "toggle", 'data-size' => "mini", 'data-on' => "Yes", 'data-off' => "No", 'data-style' => "ios") %></td> </tr> <tr> <th align='left'>Not Available:</th> <td><%= f.check_box(:not_available, 'data-toggle' => "toggle", 'data-size' => "mini", 'data-on' => "Yes", 'data-off' => "No", 'data-style' => "ios") %></td> </tr> <tr> <th align='left'>Meal Items:</th> <td> <div id="outer-dropzone"> <div id="meal_items" class="dropzone"> <% unless @meal.mitems.nil? %> <% @meal.mitems.each do |mealitem| %> <%= content_tag :div, mealitem.name, class: 'drag-drop can-drop', data: { draggable: true, url: meal_path(mealitem) } %> <% end %> <% end %> </div> </div> </td> </tr> </table> <div class="form-submit-buttons"> <%= f.submit class: 'btn btn-success' %> <%= link_to 'Cancel', meals_path, class: 'btn btn-danger' %> </div> </div> <% end %> </div> <div class="col-sm-2 col-md-2 entrees"> <div class='meal_item_title'>Entrees</div> <% Mitem.entrees.each do |food| %> <%= content_tag :div, food.name, class: 'drag-drop entree_items', data: { draggable: true, url: mitem_path(food) } %> <% end %> </div> <div class="col-sm-2 col-md-2 vegetables"> <div class='meal_item_title'>Vegetables</div> <% Mitem.vegetables.each do |food| %> <%= content_tag :div, food.name, class: 'drag-drop vegetable_items', data: { draggable: true, url: mitem_path(food) } %> <% end %> </div> <div class="col-sm-2 col-md-2 fruits"> <div class='meal_item_title'>Fruits</div> <% Mitem.fruits.each do |food| %> <%= content_tag :div, food.name, class: 'drag-drop fruit_items', data: { draggable: true, url: mitem_path(food) } %> <% end %> </div> <div class="col-sm-2 col-md-2 drinks"> <div class='meal_item_title'>Drinks</div> <% Mitem.drinks.each do |food| %> <%= content_tag :div, food.name, class: 'drag-drop drink_items', data: { draggable: true, url: mitem_path(food) } %> <% end %> </div> </div> > -- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-talk+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/e8d17aa1-5f7f-4a00-ae45-433a2b751724%40googlegroups.com.