| Leadtools.Controls Namespace : ImageViewerDragInteractiveMode Object |
function Leadtools.Controls.ImageViewerDragInteractiveMode()
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.None, 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.
this._imageViewer.interactiveModes.beginUpdate(); var dragMode = new lt.Controls.ImageViewerDragInteractiveMode; this._imageViewer.interactiveModes.add(dragMode); this._imageViewer.interactiveModes.endUpdate();