AS3 dress up game drag & drop not working - actionscript-3

Question

I'm making a dress up game and ran into the following issue.
I know how to make things drag and drop, however whenever the movieclip is situated in a layer below another, it will not let me drop it / does not register the mouse release.
In this case for example - The very top layer is the doll's hair. Under this layer are articles of clothing, and under that is the doll base. Like so : https://gyazo.com/a0ea8eae2ee5505874f4207a888249bf
I can pick up a top from the inventory but cannot place it on the doll because my cursor is over the hair from the very top layer. In a way, it seems like the hair layer is acting as a barrier between the cursor click and the article of clothing. Is there any way around this?
Here is a link to the game as it is now - i'm sure you will see the issue quickly if you attempt to move things around.GAME LINK
Here is the code for one of the clothing layers, if needed.
tshirt.addEventListener(MouseEvent.MOUSE_DOWN, drag17);
tshirt.addEventListener(MouseEvent.MOUSE_UP, drop17);
function drag17(event:MouseEvent):void
{
event.target.startDrag();
}
function drop17(event:MouseEvent):void
{
event.target.stopDrag();
}
Sorry for the rather crude explanation, and thank you in advance!

Answer 1

the problem
You are exactly right about the hair getting in the way.
method 1
One way to fix that would be (assuming you dropped the hair there):
function drop17(event:MouseEvent):void
{
event.target.stopDrag();
event.target.mouseEnabled = false;
}
In your hair example, the hair needs to have mouseEnabled set to false so that it won't be able to be your target by mistake on a mouse event. If the hair wasn't "dropped" there, set mouseEnabled to false for the hair wherever it makes sense to do so... maybe when it is first constructed or instantiated.
method 2
An alternative method is to force the item that you picked up to come to the front of the z order. Like this:
function drag17(event:MouseEvent):void
{
addChild(event.target); // this doesn't add another Sprite or movie clip, it just moves it to the top of the z order. Trust me.
event.target.startDrag();
}
With your dragging element now at the top, nothing will be "between" it and the mouse. This method probably looks cleaner since the thing you are dragging isn't getting lost behind other things. This will force you to deal with the eventual need to place the item in the correct z-order when you drop it, but that could easily be done by doing addChild to a clothesContainer or something like that. That would be another question though.