ImageViewerDragInteractiveMode Object

Summary

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

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 subscribes to the following events:

This mode allows you 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 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 the JavaScript platform, the drag is performed using DataTransfer using text and the format and Url as the data.

InteractiveEventArgs.IsHandled is set to true with this mode when:

As the operation drag is working and the user is dragging the source image, ImageViewer will fire ItemDragDrop events that allow 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

Products | Support | Contact Us | Copyright Notices
© 1991-2017 LEAD Technologies, Inc. All Rights Reserved.
Leadtools.Controls Assembly
Click or drag to resize