Jquery Position elements one below the other

I have number of divs positioned absolutely, inside a common parent. I want user to give facility to drag div around and drop over top, left, right and bottom targets around each div. I'm working on bottom targets and the logic is as follows -

Before inserting the drag able, I create an array, which will hold all the divs which are placed below each other. To position the dragged element, I found bottom of drop target as- top of drop target + height of the target. This value will be the top of dragged element. Every thing is fine up to this. Next, I use a loop, to retrieve the elements lying below drop target. My ideas was to update the top values of all those divs by adding the bottom offset, which is height of dropped element+its top value. This works only for two elements and if there are more elements, it fails. Below is my code. Kindly help me.

        //droptarget is the element after which the new element is places
    var dropElmPos=$("#"+droptarget).position();        
    var targetPos=getOffset($("#"+droptarget));
    var targetTopval=targetPos.top;
    var heightOffset=$("#"+droptarget).outerHeight(true);
    var dropElmBottom=targetTopval+heightOffset;
    var newElmTop=dropElmBottom;
    //create array of element which are below drop target
    Elmposition="bottom";
    targetELM=gettargetElement(droptarget,Elmposition);
    //insert element
    $("#"+droptarget).after(strElement);

    var newElmId=$("#"+droptarget).next().attr('id');       
    var className=newElmId+"Class";
    var elmProperty="top";
    var strCssProperties=newElmTop+"px";
    //update position of new element
    if($("#"+newElmId).hasClass(className)) {
            updateStyleExact(className, strCssProperties, elmProperty);
        }
        else {
                var strCsstext="position:absolute; clear:both; "+elmProperty+":"+strCssProperties;
                writeStyle(className, strCsstext);
                $("#"+newElmId).addClass(className)
            }

    //refresh positions of existing element which are below the drop target
        if(targetELM.length==0) {
            return false;
            }
            else {
                //refresh position of the element
                var marginOffset=0;
                var className=newElmId+"Class";
      开发者_如何学编程          var marProperty="margin";
                //get margin val
                marginVal=getSpacingVal(className, marProperty);
                marginLen=marginVal.length;
                if(marginLen==1) {
                    marginOffset=marginVal[0];
                    }
                else if(marginLen==2) {
                    marginOffset=marginVal[0];
                    }
                else if(marginLen==4) {
                    marginOffset+=marginVal[0];
                    marginOffset+=marginVal[2];
                    }
                //update positions of elements in array
                var elemLength=targetELM.length;
                                    //getoffset - gets top and left values
                var newPos=getOffset($("#"+newElmId));
                var tgtElmbottom=newPos.top+$("#"+newElmId).outerHeight(true)+marginOffset;                 
                for(var j=0; j<elemLength; j++) {
                var NextElmpos=getOffset($("#"+targetELM[j]));
                        var NextElmTop=NextElmpos.top;
                        var className=targetELM[j]+"Class";

                        var elmProperty="top";
                        //if I use following line, i works only for two elements properly and if the third and fourth element top positions are wrong - greator by the offset NextElmTop
                        var strCssProperties=tgtElmbottom+NextElmTop+"px";
                        //if I use following line, i works only for two elements, the dropped one and one after it
                        var strCssProperties=tgtElmbottom+"px";


                        if($("#"+targetELM[j]).hasClass(className)) {
                                updateStyleExact(className, strCssProperties, elmProperty);
                            }
                            else {
                                    var strCsstext="position:absolute; clear:both;"+elmProperty+":"+strCssProperties;
                                    writeStyle(className, strCsstext);
                                    $("#"+NextElmId).addClass(className)
                                }
                            }
                        }

Writing your own drag and drop features can be a pain in the ass. Why not use JQuery UI, which has a nice drag and drop class with lots of customisation options

See http://jqueryui.com/demos/draggable/ for more info.

Sure it is another dependency, but it works, every time.