Here is the jQuery code that I have written to drag multiple items at a time. It is draggable now but not droppable.

here is the code

    $(document).on('click', function (e) {
        var target = e.target;
        if (!$(target).hasClass('a')) $('.selected').removeClass('selected');
    });
    $(document).delegate('.a', 'dblclick', function (e) {
        $(this).addClass('selected');
    });
    
    $(document).delegate('.selected', 'mousedown', function (e) {
        var div = $('<div></div>');
        $('.selected').each(function () {
            div.append($(this).clone());
        });
        div.prop('id', 'currentDrag');
        $('#currentDrag').css({
            left: e.pageX + "px",
            top: e.pageY + "px"
        });
        $('body').append(div);
    });
    
    $(document).on('mouseup', function (e) {
        var tgt = e.target;
        var mPos = {
            x: e.pageX,
            y: e.pageY
        };
        $('.drop').each(function () {
            var pos = $(this).offset(),
                twt = $(this).width(),
                tht = $(this).height();
        });
        if((mPos.x > pos.left) && (mPos.x < (pos.left + twt)) && (mPos.y > targPos.top) && (mPos.y < (pos.top + tht))) {
            $(this).append($('#currentDrag').html());
        }
        $('.drop .selected').removeClass('selected');
        $('#currentDrag').remove();
    });
    $('.drop').on('mouseup', function (e) {
        $(tgt).append($('#currentDrag').html());
        $('.drop .selected').removeClass('selected');
        $('#currentDrag').remove();
    });
    
    $(document).on('mousemove', function (e) {
        $('#currentDrag').css({
            left: e.pageX + "px",
            top: e.pageY + "px"
        });
    });

What is the pronblem with my code and how can I achieve this. here is the fiddle http://jsfiddle.net/mDewr/27/

I would really recommend trying to find a way to make the jQuery UI draggable and droppable libraries work for you. Then the question becomes, similar to this one: How do I drag multiple elements with JavaScript or jQuery?.

Here's how we can apply one of the answers from that question to your problem. I'm using the jQuery UI multiple draggable plugin, the entire script of which can be found here: jquery.ui.multidraggable-1.8.8.js.

First let's simplify your HTML. By putting our draggable and dropable divs inside of elements, we don't have to apply redundant stylings to each one. Instead we can use the containing element to style

HTML

<!-- language: lang-html -->

<div id="parent">
    <div id="dragTargets">
        <div>123</div>
        <div>456</div>
        <div>789</div>
    </div>
    <div id='dropTargets'>
        <div></div>
        <div></div>
    </div>
</div>

Using the plugin we can call multidraggable on each of the drag divs. And droppable anywhere they can be dropped

JavaScript

<!-- language: lang-js -->

$("#dragTargets div").multidraggable();
$("#dropTargets div").droppable();

Customize

We can control the appearance with styling. As an example, we'll make anything that can receive drops yellow, anything you're about to drop as red, and anything that has received an element green.

Here's some styling as an example in CSS

<!-- language: lang-css -->

.ui-state-highlight { background: green; }
.ui-state-active { background: yellow; }
.ui-state-hover { background: red; }

And we'll control when these classes are applied with JavaScript:

<!-- language: lang-js -->

$("#dropTargets div").droppable({
    activeClass: "ui-state-active",
    hoverClass: "ui-state-hover",
    drop: function () {
        $(this).addClass("ui-state-highlight")
    }
});

Multi-Draggable

You should style the elements that are currently selected. The script will apply the class ui-multidraggable to all the currently selected elements. The following CSS will make it apparent to the user that their choice is selected.

<!-- language: lang-css -->

.ui-multidraggable {
    background: tan;
}

Check out this demo. Just hold down ctrl to select more than one of the divs and then drag all of them at once.

jsFiddle