Hello community,
I am a fairly new RoR programmer and I need some help with Scriptaculous Drag and Drop:
So I have
<%= draggable_element(@div_id, :revert => "failure", :snap => 5) -%>
and a droppable:
<%= drop_receiving_element(@team_div_id, :with => "'player=' + (element.id)+ '&position=' + #{draft_position}" ,:complete => visual_effect(:highlight), :update=>"status" , :url => { :action => "receive_drop"}, :hoverclass => 'hover' ) %> <% end %>
I would like to allow the draggable to "snap" to a droppable position if close or revert back to its original position if it isnt near a droppable.
I have searched over the net but I have been unsuccessful with this issue. I understand there's the Snap option but I want it to snap INTO a droppable when close or go back to its original position.
I have found some example code such as:
<script type="text/javascript"> //<![CDATA[ new Draggable('kimballben', { revert: true, }); document.getElementsByClassName ('dropbox').each ( function (e) { Droppables.add(e, { hoverclass: 'over', onDrop: function (drag, drop) { drag.revert = false; drop.appendChild(drag); drag.style.position = 'absolute'; drag.style.left = drag.style.top = 0; }, }); }); // ]]> </script>
But how do I translate that using drop_receiving_element?
Can anyone help me with this, or point me in the right position? Essentially its just "Snap to a grid" but I have been unable to find a simple example. I appreciate the help!