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

问题描述 投票:0回答:1

你好伙伴堆栈溢出,目前正在处理一个需要拖动元素的任务;不是本机API执行的图像拖动,而是拖动实际元素。元素应该显示一个放置它的位置,当它被拖动到一个区域时会改变它自己的内部内容。到目前为止,我发现这个有用的指令可以帮助我做https://xieziyu.github.io/angular2-draggable/#/usage/basic

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

我对angular2比较新,但据我所知,我的选择是; 1)找到在拖动元素时触发事件的其他包。 2)实现变异观察以查找元素中的位置变化3)在元素上实现ngIf并在拖动事件更改真值时将内容设置为Delete

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

angular drag-and-drop draggable angular2-directives
1个回答
1
投票

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.