Angular2在拖动时更改可拖动元素的内容

Posted 2023-05-08

【中文标题】Angular2在拖动时更改可拖动元素的内容

【英文标题】：Angular2 Change content of draggable element while dragging

【发布时间】：2018-06-07 11:28:14

【问题描述】：

你好，堆栈溢出者， 目前正在处理需要拖动元素的任务；不是原生 API 所做的图像拖动，而是拖动实际元素。该元素应显示一个框，显示它要被放置的位置，并在将其拖动到一个区域时更改它自己的内部内容，该区域在放置时会删除它。 到目前为止，我发现这个有用的指令可以帮助我做到这一点https://xieziyu.github.io/angular2-draggable/#/usage/basic

问题是，一旦元素经过某个点，它的内容需要更改以在其中显示 Delete，并在用户在同一事件期间将元素拖回不会删除它的区域时切换回来.该包仅具有拖动开始和拖动结束事件，我查找了其他拖动包，但它们不拖动实际元素，而是创建拖动图像。

我对 angular2 比较陌生，但据我所知，我的选择是； 1) 找到另一个在拖动元素时触发事件的包。 2）实现一个突变观察来寻找元素中的位置变化 3) 在元素上实现一个ngIf，当真值被拖动事件改变时，设置content为Delete

这里还有其他有用的工具吗？也许有角度的东西或更暴露的可拖动包可以帮助我。

【参考方案1】：

在 Angular 框架中没有“开箱即用”的解决方案。您必须自己构建它或找到另一个在拖动项目时会触发回调函数的插件。

就我而言，我基于此示例创建了一个可拖动元素https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable 您可以轻松地将这些函数转换为角度组件中的方法。

编辑：如果您有更多问题，请随时提出。对我来说，它工作得很好——你只需要将嵌套的 JS 函数转换为更 Angular/TS 的方式。顺便说一句，当 elementDrag 被调用时，您可以在那里设置一个 angular 属性，这将改变 html 模板的内容。