jQuery Draggable / Droppable targeting components

I have a stock setup for draggable/droppable. It's basically going to be a jigsaw, but an easy one where the correct pieces snap to the correct areas. I have the snapping and the jigsaw pieces down. However, when I drag piece 1 over place 2 it doesn't show it as being invalid. How do I differentiate between targeting zones?

HTML:

<div id="drag">
    <div id="piece-drag">
        <div id="piece1">
            <img src="anim/hoffmann3-anklebridge/pin 1.png" />
        </div>
        <div id="piece2">
            <img src="anim/hoffmann3-anklebridge/pin 2.png" />
        </div>
    </div>
    <div id="place-drop" style="background:url(puzzleshape.png) no-repeat;">
        <div id="piece1drop" style="width:103px; height:36px; position:absolute; z-index:50; top:346px; left:241px;"></div>
        <div id="piece2drop" style="width:103px; height:36px; position:absolute; z-index:50; top:333px; left:228px;"></div>
    </div>
</div>

JQuery:

$(function(){
            $("#piece1").draggable({ revert: "inval开发者_JS百科id" });
            $("#piece1drop").droppable({
                drop: function() { 
                    $('#piece1').hide();
                    $('#piece1drop').css('background-image', 'url("piece1placed.png")');
                }
            });
            $("#piece2").draggable({ revert: "invalid" });
            $("#piece2drop").droppable({
                drop: function() { 
                    $('#piece2').hide();
                    $('#pin2drop').css('background-image', 'url("piece2placed.png")');
                }
            });
        });

---

Add accept: "#selector" as an option to the droppable plugin:

$(function(){
            $("#piece1").draggable({ revert: "invalid" });
            $("#piece1drop").droppable({
                drop: function() { 
                    $('#piece1').hide();
                    $('#piece1drop').css('background-image', 'url("piece1placed.png")');
                },
                accept: "#piece1"
            });
            $("#piece2").draggable({ revert: "invalid" });
            $("#piece2drop").droppable({
                drop: function() { 
                    $('#piece2').hide();
                    $('#pin2drop').css('background-image', 'url("piece2placed.png")');
                },
                accept: "#piece2"
            });
    });

Here's the jQuery Demo