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

时间:2017-12-26 17:16:09

标签: angular drag-and-drop draggable angular2-directives

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

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

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

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

1 个答案:

答案 0 :(得分:1)

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

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

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