2

更新

小提琴在这里：

jsfiddle在这里

全屏结果

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

嗨，我已经在 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)
  }
});

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

问题

被丢弃的元素并没有落在我丢弃它的完全相同的地方。而是每次我放下元素时它都会放在同一个地方。我也尝试记录位置，发现无论我在哪里放置元素，顶部和左侧都是相同的。

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）预期行为： 预期行为

4

1 回答 1

1

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

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

这里，是一个完整的

jsfiddle

全屏输出：jsfiddle全屏输出

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

于 2014-09-19T16:11:30.527 回答