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

Question

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

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

我对angular2是相对较新的，但就我而言，我的选择是；1）找到一个不同的包，当元素被拖动时触发事件。2）实现突变观察，寻找元素中的位置变化3）在元素上实现ngif，并在拖动事件改变真值时将内容设置为删除

这里还有其他有用的工具吗？也许是一些有棱角的东西，或者是一个更暴露的可拖动的包，可以帮我解决这个问题。

Answer 1

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

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

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