的修订版

Question

的修订版

小提琴：

注意：我是小新手，不知怎的，我将我的代码集成到了小提琴中，但拖拽不起作用。

您好我已经在jquery draggable和droppable函数的帮助下实现了拖放和克隆功能，如下所示：

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

这是正确拖动元素，克隆它并丢弃它。

问题

丢弃的元素没有掉落在我丢弃它的完全相同的位置。相反，每当我丢弃元素时它都会在同一个地方掉落。我也尝试记录这些位置，发现顶部和左侧是相同的，不管我放弃了这个元素。

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）现在正在发生这种情况（错误行为） current behavior