Javascript 角度JQuery UI元素的可拖动副本

我这里有一个网页设计，我正试图在其中制作一个可拖动的UI

基本上，用户应该能够点击并拖动任何不同类型的问题从左边到右边

通过执行以下操作，我可以拖动按钮：

$(".ui-draggable").draggable({
    cancel: false
})

这有两个问题，第一个是按钮本身移动不到位：

第二个是按钮是可拖动的，但只能在容纳它们的div中拖动，因此实际上不能将它们拖动到屏幕的右侧

解决方案似乎是在按钮上添加一个单击函数，这样当您单击按钮时，您可以创建一个与按钮完全相似的div，并将其位置设置为光标所在位置与body的父元素的正确位置

不过，我正在努力找出最好的方法

以下是我尝试的ng单击：

这将在主体中生成一个按钮，但它会将其放置在屏幕底部，如果没有一些滚动之类的操作，它最初不会真正可见

---

关于如何处理这个问题有什么想法或建议吗？基本上，say Single Selection按钮应该冻结在左侧，但是当您单击并拖动它时，您应该能够将按钮的副本拖动到右侧。

您可以使用helper选项停止原始元素的移动，并附加到文档的正文中，将其移出起始容器。

您需要在api中使用克隆选项，以便原始文件不会移动哦，这太好了！你知道我如何让克隆从body继承，这样我就可以把它拖到当前div之外吗？哦，等等，这里有一个appendTo:“body”选项！完美的想把这个作为答案扔进去，我会接受的？！别忘了接受@KScandrett的答案。另外，这是控制器中大量的DOM操作，这是一种角度反模式。我建议您将任何插件或其他DOM操作捆绑到一个指令中，否则它可能会成为一个很难维护的过程。我是angular的新手。什么是指令？

$scope.questionClicked = (event) ->
    str = '<button id="question-box" type="button" class="btn btn-default btn-block question-type ui-draggable ui-draggable-handle" data-type="rating">' + event.currentTarget.innerText + '</button>'

    $('body').append(str)

    $("#question-box").css({
      top: event.pageY,
      left: event.pageX
    }).toggle();

    $("#question-box").draggable({
        cancel: false,
    })

    return true