multiple types of draggable for multiple droppables jquery

Question

I am trying to create a three bins where images can be dragged according to their types type1 images to binA... type2 images to binB type3images to binC

help me to solve it My error is the droppable is only being in only one... others dont accept items plz help

here is my code

<div class="wrapper">
<center>

    <table border="1">

        <tr>
        <td>
            <div class="dropholder0">
                <div id="dropable1">

                </div>

            </div>
        </td>
        <td>
            <div class="dropholder1">
                <div id="dropable2">

                </div>
            </div>
        </td>
        <td>
            <div class="dropholder2">
                <div id="dropable3">

                </div>
            </div>
        </td>

        </tr>

    </table>
</center>


<div class="photo-album">

    <h1><span>Drag these pictures to above bars</span></h1>

    <a href="#" class="draggable large polaroid img1 type1">
        <img src="images/Pic21.png" alt="">
        <p>description or caption of this pic</p>
    </a>
    <a href="#" class="draggable medium polaroid img4 type2">
        <img src="images/Pic24.png" alt="type2">
        <p>type2</p>
    </a>

    <a href="#" class="draggable polaroid img6 type3">
        <img src="images/Pic26.png" alt="">
        <p>type 3</p>
    </a>
</div>

jquery UI function

   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
   <script type="text/javascript">

(function() {

    $( ".draggable" ).draggable();
    $( "#dropable1" ).droppable({ 
        activeClass: "small",
        accept: ".type1",
        drop: function(en,ui) {
            console.log(ui);
        }


    });

    $( "#dropable1" ).on( "drop", function( event, ui ) {
        // ui.draggable.width('50');
        // ui.draggable.height('50');
        console.log(ui.draggable.attr('class'));
        var allClass = ui.draggable.attr('class')
        ui.draggable.removeClass(allClass);
        ui.draggable.draggable( 'disable' );
        ui.draggable.addClass('draggable small polaroid imageChanged');

    } );

    $(".dropholder").find( "#dropable2" ).droppable({ 
        activeClass: "small",
        accept: ".type2",
        drop: function(en,ui) {
            console.log(ui);
            console.log('type2')


        }});

    $(".dropholder").find( "#dropable2" ).on( "drop", function( event, ui ) {
        console.log('type2');
        console.log(ui.draggable.attr('class'));
        var allClass = ui.draggable.attr('class')
        ui.draggable.removeClass(allClass);
        ui.draggable.draggable( 'disable' );
        ui.draggable.addClass('draggable small polaroid imageChanged');

    } );

    $( "#dropable3" ).droppable({ 
        activeClass: "small",
        accept: ".type2",
        drop: function(en,ui) {
            console.log(ui);
        }


    });

    $( "#dropable3" ).on( "drop", function( event, ui ) {
        console.log(ui.draggable.attr('class'));
        var allClass = ui.draggable.attr('class')
        ui.draggable.removeClass(allClass);
        ui.draggable.draggable( 'disable' );
        ui.draggable.addClass('draggable small polaroid imageChanged');

    } );

})();

Thanks in advance :)

jsfiddle link >> http://jsfiddle.net/JuA5P/

Answer 1

Your droppables had no height so it was not possible to drop the draggable images to them.

Give them some height

<div id="dropable2" style="width: 200px; height:200px; border: 1px solid red">

                    </div>

http://jsfiddle.net/JuA5P/1/