Angular JQuery UI可拖动元素副本

Question

我在这里有一个网页设计，我正在努力制作一个可拖动的用户界面。

基本上，用户应该可以从左侧到右侧单击并拖动任何不同类型的问题。

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

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

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

第二个是按钮是可拖动的，但只能在容纳它们的div中，所以你实际上无法将它们拖到屏幕的右侧。

似乎解决方法是在按钮上添加一个点击功能，这样当您单击按钮时，您创建一个看起来与按钮完全相同的div，并将其位置设置为光标所在的位置父元素为body。

我很难找到最好的方法来做到这一点。

以下是ng-click的尝试：

$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

这会在正文中生成一个按钮，但它会将它放在屏幕的底部，如果没有滚动等，它就不会真正可见。

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

Answer 1

您可以使用帮助程序选项helper: "clone"来停止原始元素移动，并appendTo: "body"附加到文档的正文以将其移动到起始容器之外。