title: How to get co ordinates of div?
body: <p>I am using the below code to get the position of dropped elements. I am saving the position to database,so that when the user opens the page next time, the elements are in the same position. It works fine so far, but when the screen size changes the position are changed.for example if i am using big desktop screen ,capture the image position ,save it to database and open the same page in laptop[small screen toughbook] ,the position are varied.</p>
  
  <p>I guess this is bacause the JQuery gets the position of elements relative to page ,not to my container "div ". So how to get position of elements with in a div.</p>
  
  <pre><code> $(document).ready(function() {
        //Counter
        counter = 0;
        //Make element draggable
        $("#fd img").draggable({
            helper: 'clone',
            containment: '#frame',
            //When first dragged
            stop: function(ev, ui) {
  
                var pos = $(ui.helper).offset();
                objName = "#clonediv" + counter
                $(objName).css({ "left": pos.left, "top": pos.top });
                $(objName).removeClass("drag");
                //When an existiung object is dragged
  
                var container = $('#frame');
                $(objName).draggable({
                    containment: container,
                    stop: function(ev, ui) {
  
                        var pos = $(ui.helper).offset();
                        //console.log($(this).attr("id"));
                        //console.log(pos.left)
                        //console.log(pos.top)
                    }
                });
            }
        });
        //Make element droppable
        $("#frame").droppable({
  
            drop: function(ev, ui) {
  
            var angle; 
                if (document.getElementById('angle').value != "") {
                    angle = document.getElementById('angle').value;
                    document.getElementById('angle').value = 0;
                }
                else {
                    angle = 0;
                }
  </code></pre>
  
  <p>debugger
                    if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {</p>
  
  <pre><code>                  if (ui.helper.attr('id').indexOf("clonediv") != -1) {
                        var deleteimage = 0;
                        var id = ui.helper.attr('id').substring(8);
                        saveCoords(ui.absolutePosition.left, ui.absolutePosition.top, angle, id, document.getElementById("trafficID").value, deleteimage);
  
                    }
                    else {
                        var pos = $(ui.helper).offset();
                        counter++;
                        var element = $(ui.helper).clone();
                        //var element = element1.resizable();
  
                        element.addClass("tempclass");
                        $(this).append(element);
                        var deleteimage = 0;
                        element.attr("id", ui.helper.attr('id') + counter);
  
                        **saveCoords(ui.absolutePosition.left, ui.absolutePosition.top, angle, ui.helper.attr('id') + counter, document.getElementById("trafficID").value, deleteimage);**
  
                        $(".tempclass").attr("id", "clonediv" + ui.helper.attr('id') + counter);
                        $("#clonediv" + ui.helper.attr('id') + counter).removeClass("tempclass");
  
                        //$(".tempclass").attr("onclick",function(){ $(this).remove(););
                        //$("#clonediv" + counter).removeClass("tempclass");
                        //Get the dynamically item id
  
                        draggedNumber = ui.helper.attr('id').search(/drag([0-9])/);
                        itemDragged = "dragged" + RegExp.$1;
  
                        //console.log(itemDragged)
                        //alert('left' + pos.left + ',top' + pos.top + 'of item' + itemDragged);
  
                        $("#clonediv" + ui.helper.attr('id') + counter).addClass(itemDragged);
                    }
  
  
  
                }
            }
        });
        //Make the element resizable
  
  
    });
  </code></pre>
  
  <p>Thanks,</p>