Angular JQuery UI 元素的可拖动副本

Posted 2023-05-09

【中文标题】Angular JQuery UI 元素的可拖动副本

【英文标题】：Angular JQuery UI Draggable Copy Of Element

【发布时间】：2017-08-10 11:38:57

【问题描述】：

我在这里有一个网页设计，我正在尝试在其中制作一个可拖动的 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按钮应该被冻结在左侧，但是当您单击并拖动它时，您应该能够将按钮的副本拖动到右侧。

【问题讨论】：

您需要在 api 中使用 clone 选项，以免原件移动

哦，太完美了！知道如何使克隆从 body 继承，以便将其拖到当前 div 之外？

哦等等，有一个appendTo: 'body' 选项！完美的！想把它作为答案扔进去我会接受吗？！

别忘了接受@KScandrett 的回答。此外，控制器中的 DOM 操作非常多，这是一个 Angular 反模式。我建议您将任何插件或其他 DOM 操作捆绑到指令中 - 否则可能会变得难以维护。

我是 Angular 的新手。什么是指令？

【参考方案1】：

您可以使用辅助选项helper: "clone" 停止原始元素的移动，并使用appendTo: "body" 附加到文档的主体以将其移出起始容器。