images in draggable div get dragged as a group

i know i'm doing something stupid, and would really appreciate some advice.

i've dynamically created div's in a row with four images, and each image must be individually draggable.

the div's i've created look like this:

<div id="imageAreaDiv0" class="drag ui-draggable">
    <div id="uconConnectedToUserName02" class="drag ui-draggable">
        <img class="drag ui-draggab开发者_Go百科le" src="UserThumbs_G-L/a/r/harrytushie" alt="harrytushie" title="harrytushie">
    </div>
    <div id="uconConnectedToUserName03" class="drag ui-draggable">
        <img class="drag ui-draggable" src="UserThumbs_G-L/o/e/joeblow" alt="joeblow" title="joeblow">
    </div>
    <div id="uconConnectedToUserName04" class="drag ui-draggable">
        <img class="drag ui-draggable" src="Images/defaultConnectionThumbnail.png" alt="sampleuser000" title="sampleuser000">
    </div>
    <div id="uconConnectedToUserName05" class="drag ui-draggable">
        <img class="drag ui-draggable" src="Images/defaultConnectionThumbnail.png" alt="sampleuser001" title="sampleuser001">
    </div>
</div>

the css looks like this:

.drag {
margin-right:5px;
display: inline-block;
position: relative;
cursor: move;
}

and the jQuery drag stuff looks like this:

    $(".target").css({ opacity:"0.5" });

    $(".drag").draggable({
        zIndex: 3});

    $(".target").droppable({
        cursor: 'move',
        drop:  function(event, ui) {
            var message = event.target.id;
            var connectName = $(ui.draggable).attr('alt');
            if(event.shiftKey) {
                var actionTaken = copyConnection(connectName);
            } else {
                var actionTaken = moveConnection(connectName);
            }
            document.getElementById('errorNotificationArea').innerHTML =
                '<span style="color:red;font-size:12px;"><br>Connection '+connectName+' was '+actionTaken+' to category '+message+'<br><br></span>';
        }
    })
})(jQuery);

but when i drag an image in this row (or any row with more than one image), all of the images in that row move as a block; i.e., they all move at once.

if i turn off dragging on the "wrapper" div (id=imageAreaDiv0), then the images don't drag.

if someone could please tell me what i'm doing wrong, i'd really appreciate it.

thanks! twistOneUp

Remove the drag class from DIVs.

Or rewrite your jQuery function to $('img.drag').draggable().

You're calling draggable() on all elements with the class of .drag. Your container also has the class of .drag (as well as your images). So your container is being dragged (with all images inside of it).