Jquery拖放和克隆正确定位

Question

已更新

在这里摆弄:

jsfiddle here

full-screen-result

注意:我是 fiddle 新手，不知何故我将代码集成到 fiddle 中，但拖放不起作用。

嗨，我在 jquery 可拖放函数的帮助下实现了拖放和克隆功能，如下所示:

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

注意:$("#document-reader") 是一个可滚动的 div。我想将元素从上到下拖动到该 div 中的任何位置。我可以滚动父 div 并拖动 div 中间的元素。它应该粘在我拖动的地方。

$("#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)
  }
});

这是正确地拖动一个元素，克隆它并放置它。

问题

放置的元素没有放置在与我放置它的位置完全相同的位置。相反，每次我删除元素时它都会落在同一个地方。我也尝试记录位置，发现无论我将元素放在哪里，top 和 left 都是相同的。

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]

不知道我的代码有什么问题。

预期结果:

请访问这些屏幕截图:

1)现在正在发生这种情况(错误行为)

2) 预期行为:

Answer 1

我通过在父可拖动元素中添加 dragMe 和 parent 类解决了该问题。

现在，使用dragSigners类来拖动和克隆元素。并使用 dragMe 拖动新克隆的元素。还要设置 dragMe position:relative。

这里是完整的

jsfiddle

全屏输出:jsfiddle full screen output

[注意:我提出了新问题，请点击该问题的链接:jquery drag, drop and clone, find dropped position of element