Question

I’d like to sort multiple JQuery draggables into multiple JQuery droppables.

e.g I have three items RED, BLUE & GREEN. RED can only be dropped on the RED BOX, GREEN onto the GREEN BOX & BLUE onto the BLUE BOX

<div class="draggable RED">
<p>RED ITEM</p>
</div>

<div class="draggable BLUE">
 <p>BLUE ITEM</p>
</div>

<div class="draggable GREEN">
 <p>GREEN ITEM</p>
</div>


<div class="droppable" title="RED">
 <p>RED BOX</p>
</div>

<div class="droppable" title="BLUE">
 <p>BLUE BOX</p>
</div>

<div class="droppable" title="GREEN">
 <p>GREEN BOX</p>
</div>

And this is the JQuery that I tried with no success.

   $(function() {
  $( ".draggable" ).draggable();
  $( ".droppable" ).droppable({
   accept: '.'+$(this).attr("title"), 
   activeClass: "ui-state-hover",
   hoverClass: "ui-state-active",
   drop: function( event, ui ) {
    $( this )
     .addClass( "ui-state-highlight" )
     .find( "p" )
      .html( "Dropped!" );
   }
  });
 });

I’m not sure how to structure the accept clause to accept only draggables matching the title attribute of the droppable.

Answer 1

I think this might help:

$(function() {
  $( ".draggable" ).draggable();

    $( ".droppable" ).each(function (index){

        var title = '.'+$(this).attr('title');

        $(this).droppable({      
           accept:  title,
           activeClass: "ui-state-hover",
           hoverClass: "ui-state-active",
           drop: function( event, ui ) {
            $( this )
             .addClass( "ui-state-highlight" )
             .find( "p" )
              .html( "Dropped!" );
           }
          }); 
    });
 });​