![]() pageX and pageY) or to the position of a specified element. The transitionTo method animates the element to a specific location relative to the page (i.e. The transitionToOrigin method, as the name suggests, animates the currently dragged element or its ghost to the start position, where the dragging began. This can be achieved by using the transitionToOrigin and the transitionTo methods. You can apply transition animation to the igxDrag at any time, but it is advised to use it when dragging ends or the element is not currently dragged. ![]() When an element is being dragged, there are no animations applied by default. It can be done using the igxDragHandle directive and can be applied to multiple elements inside the igxDrag. You can specify an element that is a child of the igxDrag by which to drag, since by default the whole element is used to perform that action. That way there will be no extra ghost element rendered and if you need to apply custom styling when dragging and element, you can apply it directly to the base element. If you would like to move the base element, to which the igxDrag directive is applied, you can do that by setting the ghost input to false. It can be customized by providing a template reference to the ghostTemplate input directly. The ghost element by default is a copy of the base element the igxDrag is used on. Right before the ghost is about to be removed, the ghostDestroy event will be triggered. If the dragStart is canceled, no ghost will be created and the ghostCreate event will not trigger accordingly. The event is triggered right after the dragStart event. The default behavior of igxDrag directive is to leave the base element unmodified and to create a ghost element when drag operation is performed by the end user.īefore the ghost is rendered on the page, a ghostCreate event is triggered containing information of the ghost element that is about to be added. The igxDrag directive can be applied on any DOM element by just adding it to its template. It is triggered every time a movement is detected while dragging an element around.Īfter the user releases the mouse/touch the drag ghost element is removed from the DOM and the dragEnd event will be emitted.ĭue to the nature of the dragMove event, it can be triggered many times in a short period of time, which may cause performance issues for complex operations done when triggered. To prevent any actual movement to occur, the event can be canceled by setting the cancel property to true.īefore any actual movement is about to be performed, the dragMove event is also triggered, containing the last and next position of the pointer. When the dragging starts, the dragStart event is triggered. Otherwise the interaction is considered as a click and a dragClick event is triggered. This is customizable and can be changed using the dragTolerance input. Dragging FundamentalsĪ drag operation starts when the end user swipes at least 5px in any direction. ![]() In combination with the igxDrop directive, the placing of the dragged element can be done as well, so you can have fully interactive application. When an element inside your Angular application needs to be dragged from one place to another on the page, the igxDrag directive is designed to help achieve this behavior.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |