【问题标题】：Jquery drag, drop and clone proper positioningjquery拖放克隆正确定位
【发布时间】：2014-09-19 05:36:48
【问题描述】：

更新

在这里拉小提琴：

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

您好，我已经借助 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) 预期行为：

【问题讨论】：

尽可能准备 jsfiddle
好的，谢谢，我会努力的。我是 js fiddle 的新手。我试试看
我在上面添加了jsfiddle和共享链接，谢谢
小提琴不起作用，因为您没有包含 jqueryui。改用这个 bootply bootply.com/tFeAV4mNlU -- 它包括 bootstrap 和 jqueryUI
嗨 Skelly，我在我的 jsfiddle 中添加了 jqueryUI。这就是在我的真实网络应用程序中发生的事情。但这不是预期的结果。我想在我放置它的确切位置显示放置的元素。我在上面的expected result 部分提到了它，就在附加图像上方。请参阅随附的屏幕截图以了解预期结果

标签： jquery twitter-bootstrap jquery-ui jquery-draggable jquery-droppable

【解决方案1】：

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

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

这里是完整的

jsfiddle

全屏输出：jsfiddle full screen output

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

【讨论】：