Dropping and Sorting with AJAX and script.aculo.us

Droppable options

hoverclass is a class name that will be added to the droppable when an accepted draggable is hovered over it, indicating to the user that the droppable is active. We’ve already seen a couple examples of this in the previous section.

accept can be a string or an array of strings with CSS classes. If provided, the droppable will only accept draggables that have one of these CSS classes. For example:

  <div id="dragGreen" class="green box">drag </div>
  <%= draggable_element :dragGreen, :revert => true %>

  <div id="dragPink" class="pink box">drag </div>
  <%= draggable_element :dragPink, :revert => true %>

  <div id="dropAccept" class="pink box">drop here (green only).</div>
  <%= drop_receiving_element :dropAccept, :hoverclass => "hover",
       :accept => 'green' %>

containmentspecifies that the droppable will only accept the draggable if it’s contained in the given elements or array of elements. It is evaluated as a JavaScript expression, so specifying a DOM element ID requires two sets of quotation marks. For example:

  <div id="one">
      <div id="dragGreen2" class="green box">drag</div>
      <%= draggable_element :dragGreen2, :revert => true %>
  </div>

  <div id="two">
      <div id="dragPink2" class="pink box">drag</div>
      <%= draggable_element :dragPink2, :revert => true %>
  </div>

  <div id="dropContainment" class="pink box">drop here.</div>
  <%= drop_receiving_element :dropContainment, :hoverclass => "hover",
     :containment => "'one'" %>

onHoveris a callback function that fires whenever a draggable is moved over the droppable, and the droppable accepts it. The callback gets three parameters: the draggable, the droppable, and the percentage of overlapping as defined by the overlap option. A simple example, without any parameters:

  <div id="dropOnHover" class="pink box">drop</div>
  <%= drop_receiving_element :dropOnHover, :hoverclass => "hover",
        :onHover => "function(){  $('dropOnHover').update('hover!'); }" %>

And here is an example using all three possible callback parameters:

  <div id="dropOnHover" class="pink box">drop</div>
  <%= drop_receiving_element :dropOnHover, :hoverclass => "hover",
        :onHover => "function(draggable, droppable, overlap){
           $('dropOnHover').update('you dragged ' + draggable.id +
                ' over ' + droppable.id + ' by ' + overlap +
                ' percent'); }" %>

onDrop is called whenever a draggable is released over the droppable and it’s accepted. The callback gets two parameters: the draggable element and the droppable element. For example:

  <div id="dropOnDrop" class="pink box">drop</div>
  <%= drop_receiving_element :dropOnDrop, :hoverclass => "hover",
      :onDrop => "function(drag, drop){
         alert('you dropped ' + drag.id + ' on ' + drop.id) }" %>