ImageViewerDragInteractiveMode Object

Summary

Drags images and floaters from an image viewer using mouse or touch.

Syntax

JavaScript Syntax

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

TypeScript Syntax

class lt.Controls.ImageViewerDragInteractiveMode() 
	extends lt.Controls.ImageViewerInteractiveMode

Remarks

ImageViewerDragInteractiveMode derives from ImageViewerInteractiveMode and subscribe to the following events

This mode allows you to use an ImageViewer as the source for a drag operation. The viewer will then handle initializing and updating the UI notifications when the user clicks and drags on 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 on the viewer. This is done by listening to DragStarted events.

When this event occurs, the mode first checks if the user clicked an item (ImageViewerInteractiveMode.Item is not null) and the item has a valid Url if not, it will not start a drag.

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

As the operation drag is working and the user is dragging the source image, ImageViewer will fire ItemDragDrop events that allows the user to modify the drop operation or cancel the operation. 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 ImageViewerDragInteractiveMode
TargetImageViewer	The current target image viewer for this drop operation. This changes as the user drags 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 SourceImageViewer if the item is being dragged over the same viewer (if supported)
Operation	Current drag operation such as Enter, Over, Leave or Drop
Location	Current location of the drag item in relation to TargetImageViewer
SourceItem	The item in SourceImageViewer that originated the operation
TargetItem	The item in 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	Current effect, change this to update the cursor
Format	The format of the data object
Abort	Allows the user to cancel the operation

AllowedEffects determine which effects is allowed to the target (Copy, Move or Link). If the value of AllowedEffects is DropEffects, then the drag operation is not started. Note that if a floater image is used, then Link effect is not supported and the drag operation will be aborted. The floater must be copied or moved.

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

The example code shows how to intercept the drag operation calls.

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

Example

JavaScript Example

this._imageViewer.interactiveModes.beginUpdate(); 
var dragMode = new lt.Controls.ImageViewerDragInteractiveMode; 
this._imageViewer.interactiveModes.add(dragMode); 
this._imageViewer.interactiveModes.endUpdate();

Requirements

Target Platforms

See Also

Reference

ImageViewerDragInteractiveMode Members

Leadtools.Controls Namespace