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

Help Version 20.0.2020.4.3
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2020 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.Controls Assembly