Friday, July 19, 2019
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+unsubscribe@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.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment