Angular JQuery UI 元素的可拖动副本

Question

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

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

我可以通过这样做使按钮可拖动：

$(".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" 附加到文档的主体以将其移出起始容器。