UPDATED

Fiddle Here:

jsfiddle here

full-screen-result

NOTE: I am new to fiddle, and somehow I integrated my code to fiddle, but drag drop is not working on it.

Hi I have implemented drag, drop and clone feature with the help of jquery draggable and droppable functions which looks like this:

$(".dragSigners").draggable({
  helper: 'clone',
  cursor: 'move',
  tolerance: 'fit',
  revert: true 
});

NOTE: $("#document-reader") is an scrollable div. I want to drag element anywhere in this div from top to bottom. I can scroll parent div and drag element in the middle of the div. And it should stick where I dragged it.

$("#document-reader").droppable({
  accept: '.dragSigners',
  activeClass: "drop-area",

  drop: function(e, ui) {
    dragEl = ui.helper.clone();
    ui.helper.remove();

    document_id   = dragEl.data("document-id");
    signer_id     = dragEl.data("signer-id");
    stopPosition  = dragEl.position();
    dragEl.data("signer-id", signer_id);

    dragEl.draggable({
      helper: 'original',
      cursor: 'move',
      tolerance: 'fit',
      drop: function (event, ui) {
        $(ui.draggable).remove();
      }
    });

    // append element to #document-reader
    dragEl.addClass("dragMe");
    dragEl.removeClass("dragSigners col-sm-6");
    dragEl.find("span.closeIt").removeClass("hideIt");
    dragEl.appendTo('#document-reader');

    // ajax call for updating position to database for future reference
    updateDropPosition(dragEl, stopPosition, signer_id, document_id)
  }
});

This is properly dragging an element, clonning it and dropping it.

PROBLEM

The dropped element is not dropping in exactly same place where I dropped it. Rather it is dropping in same place every time I drop element. I tried to log the positions also, and found that top and left are same, whereever I dropped the element.

console.log(dragEl.position())

output:  Object { top=-5, left=-5} // [NOTE: it doesn't matter where ever I drop element, It is showing top and left as -5. and it is not showing dropped element in the exact same place where I dropped it]

Don't know what is the problem with my code.

EXPECTED RESULT:

Please visite these screenshots:

1) This is happening right now (wrong behavior)

2) Expected behavior:

I solved the problem by adding dragMe and parent class in parent draggable element.

Now, use dragSigners class for dragging and cloning element. And use dragMe for dragging newly cloned element. Also set dragMe position: relative.

Here, is a complete

jsfiddle

full screen output: jsfiddle full screen output

[NOTE: I have opened new problem, please follow link for that problem: jquery drag, drop and clone, find dropped position of element