CODEWITHSUNDEEP
angulardrag-and-dropdraggableangular2-directives
yanki
yanki

Reputation: 385

Angular2 Change content of draggable element while dragging

Hello fellow stack overflowers, Currently working on a task that requires an element to be dragged; not the image drag that the native API does, but dragging the actual element around. The element should display a box of where it is to be dropped and change it's own internal contents when its being dragged over an area that would delete it when dropped there. Thus far I found this useful directive that helps me do that https://xieziyu.github.io/angular2-draggable/#/usage/basic

The issue is that once the element passes a certain point it's content needs to change to display Delete inside of it instead, and switch back when the user drags the element during the same event back to the area that wouldn't delete it. That package only has on drag start and on drag end events and I have looked up other drag packages but they do not drag the actual element and instead create a drag image.

I am relatively new to angular2, but as far as I see it my options are; 1) Find a different package that fires an event when the element is being dragged. 2) Implement a mutation observe to look for the position change in the element 3) Implement an ngIf on the element and set content to Delete when a truth value is changed by a dragging event

Is there any other tool that would be helpful here? Maybe something in angular or a more exposed draggable package that would help me out.

Upvotes: 0

Views: 1417

Answers (1)

DrNio
DrNio

Reputation: 1976

There is no "out of the box" solution in angular framework for this. You have to build it yourself or find another plugin that will have a callback function being triggered when the item is being dragged.

In my case, I created a draggable element based on this example https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable You can easily convert those functions to methods in a angular component.

Edit: If you have more questions feel free to ask. For me it worked nicely - you just have to convert the nested JS functions to a more Angular/TS way. Btw, when elementDrag is being called you can set an angular property there which will change the content of the html template.

Upvotes: 1

Related Questions