In This Topic ▼

ImageViewerDragInteractiveMode Object

Summary

Drags images and floaters from an image viewer using a mouse, touch screen, or multi-touch device, often to achieve Drag and Drop effects.

Syntax

TypeScript

JavaScript

function lt.Controls.ImageViewerDragInteractiveMode 
	extends lt.Controls.ImageViewerInteractiveMode

class lt.Controls.ImageViewerDragInteractiveMode() 
	extends ImageViewerInteractiveMode

Remarks

The ImageViewerDragInteractiveMode object derives from the ImageViewerInteractiveMode object and subscribes to the following events:

The ImageViewerDragInteractiveMode mode makes it possible to use an ImageViewer as the source for a drag operation (to act as the drop target, the target ImageViewer must have ImageViewer.allowDrop set to true). The viewer will then handle initializing and updating the UI notifications when the user clicks and drags an image or floater of an item in the viewer.

The mode works on any item in the viewer. The mode uses AutoSet to automatically detect the source item for the drag operation when the user clicks the viewer. This is done by listening to dragStarted events.

When a dragStarted event occurs, the mode first determines whether the user clicked an item (the ImageViewerInteractiveMode.Item is not null) and the item has a valid url. If not, it will not start a drag.

In the JavaScript platform, the drag is performed using DataTransfer using text as the format and url as the data.

The InteractiveEventArgs.isHandled property is set to true with this mode when:

A drag is determined to have properly started in the handler for a dragStarted event
Either a dragDelta or dragCompleted event occurs while the interactive mode is working

As the drag operation is working and the user is dragging the source image, the ImageViewer will fire ItemDragDrop events which allow the user to modify the drop operation or cancel it. The event data contains the following members:

Member	Description
sourceImageViewer	The image viewer that initiated the drag event. This is the same ImageViewer currently attached to the ImageViewerDragInteractiveMode object
targetImageViewer	The current target image viewer for this drop operation. This changes as the user drags the item on the application if more than one image viewer exists. It can be null if the object is not currently over an image viewer object and the same value as the sourceImageViewer if the item is being dragged over the same viewer (if supported)
operation	An ImageViewerItemDragDropOperation enumeration value representing the current drag operation such as Enter, Over, Leave or Drop
location	A Leadtools.LeadPointD point representing the current location of the item being dragged relative to the TargetImageViewer
SourceItem	The item in the SourceImageViewer that originated the operation
TargetItem	The item in the TargetImageViewer that will currently be the target for the drop operation. It can be null if the image viewer does not have any items or if the object is not on top of any item boundary.
effect	The current effect. Valid values are "move" and "copy". The default value is "copy". Change this to update the cursor
format	The format of the data object
abort	Gets or a sets a value that indicates whether the drag/drop operation is to be aborted.

The allowedEffects property determines which effects are allowed for the target (Copy or Move). The default value is Copy.

When drag is finished and the Move effect was used, the mode will delete the image or floater from the source item.

For more information, refer to Image Viewer Interactive Modes and Image Viewer Drag and Drop.

Example

For an example, see ImageViewer.ItemDragDrop.

For a full demo, see the Image Viewer Drag Drop Features demo.

Requirements

Target Platforms

Reference

ImageViewerDragInteractiveMode Members

Leadtools.Controls Namespace

Download our FREE evaluation

Help Version 20.0.2020.4.3