Jquery drag, drop and clone proper positioning

Question

UPDATED

Fiddle Here:

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) current behavior

2) Expected behavior:

Okay thanks, I will try to do that. I am new to js fiddle. I will give it a try — przbadu
The fiddle doesn't work since you didn't include jqueryui. Use this bootply instead bootply.com/tFeAV4mNlU -- it includes the bootstrap and jqueryUI — Zim
HI Skelly, I have added jqueryUI in my jsfiddle. That is what happening in my real web app. But it is not the expected result. I want to display dropped element in the exact position where I dropped it. I have mentioned it in expected result section above in question just above attached images. Please see attached screenshot also for expected result — przbadu

przbadu przbadu · Accepted Answer · 2014-09-19T16:11:30

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

Jquery drag, drop and clone proper positioning

UPDATED

1 Answers