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.

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

Example

ItemDragDrop.ts

ImageViewer.ts

ItemDragDrop.js

ImageViewer.js

ItemDragDrop.html

import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_ItemDragDropExample { 
   private viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   private run = (viewer: lt.Controls.ImageViewer) => { 
      // Set margins, padding, and borders 
      viewer.viewMargin = lt.Controls.ControlPadding.createAll(15); 
      viewer.itemPadding = lt.Controls.ControlPadding.createAll(20); 
      viewer.itemBorderThickness = 5; 
      viewer.itemMargin = lt.Controls.ControlPadding.createAll(10); 
 
      // Clear the items and add new ones 
      viewer.beginUpdate(); 
      viewer.items.clear(); 
      viewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout(); 
      let item0: lt.Controls.ImageViewerItem = new lt.Controls.ImageViewerItem(); 
      item0.text = "Item 0"; 
      item0.url = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
      viewer.items.add(item0); 
      let item1: lt.Controls.ImageViewerItem = new lt.Controls.ImageViewerItem(); 
      item1.text = "Item 1"; 
      item1.url = "https://demo.leadtools.com/images/png/pngimage.png"; 
      viewer.items.add(item1); 
      viewer.endUpdate(); 
 
      viewer.allowDrop = true; 
      viewer.activeItem = viewer.items.item(0); 
 
      viewer.interactiveModes.beginUpdate(); 
      const dragMode = new lt.Controls.ImageViewerDragInteractiveMode(); 
      viewer.interactiveModes.insert(0, dragMode); 
      viewer.interactiveModes.endUpdate(); 
 
      const getOpName = (value) => { 
         const enumOb = lt.Controls.ImageViewerItemDragDropOperation; 
         for (const prop in enumOb) { 
            if (enumOb.hasOwnProperty(prop)) { 
               if (enumOb[prop] === value) 
                  return prop; 
            } 
         } 
         return null; 
      } 
 
      let previousOp: lt.Controls.ImageViewerItemDragDropOperation = null; 
 
      // Drag items to use 
      viewer.itemDragDrop.add((sender, e) => { 
         if (previousOp === e.operation) 
            return; 
         previousOp = e.operation; 
 
         const sourceItem: lt.Controls.ImageViewerItem = e.sourceItem; 
         const sourceImageViewer: lt.Controls.ImageViewer = e.sourceImageViewer; 
         const targetItem: lt.Controls.ImageViewerItem = e.targetItem; 
         const targetImageViewer: lt.Controls.ImageViewer = e.targetImageViewer; 
 
         // Log all the information to the console 
         console.log({ 
            operation: getOpName(e.operation), 
            sourceItem: sourceItem && sourceImageViewer.items.indexOf(sourceItem), 
            sourceImageViewer: sourceImageViewer, 
            targetItem: targetItem && targetImageViewer && targetImageViewer.items.indexOf(targetItem), 
            targetImageViewer: targetImageViewer 
         }); 
      }); 
   } 
}

export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   protected imageViewer: lt.Controls.ImageViewer = null; 
   // Generic state value used by the examples 
   public timesClicked: number = 0; 
 
   constructor(callback?: (viewer: lt.Controls.ImageViewer) => void) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
}

import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_ItemDragDropExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      // Set margins, padding, and borders 
      viewer.viewMargin = lt.Controls.ControlPadding.createAll(15); 
      viewer.itemPadding = lt.Controls.ControlPadding.createAll(20); 
      viewer.itemBorderThickness = 5; 
      viewer.itemMargin = lt.Controls.ControlPadding.createAll(10); 
 
      // Clear the items and add new ones 
      viewer.beginUpdate(); 
      viewer.items.clear(); 
      viewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout(); 
      let item0 = new lt.Controls.ImageViewerItem(); 
      item0.text = "Item 0"; 
      item0.url = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
      viewer.items.add(item0); 
      let item1 = new lt.Controls.ImageViewerItem(); 
      item1.text = "Item 1"; 
      item1.url = "https://demo.leadtools.com/images/png/pngimage.png"; 
      viewer.items.add(item1); 
      viewer.endUpdate(); 
 
      viewer.allowDrop = true; 
      viewer.activeItem = viewer.items.item(0); 
 
      viewer.interactiveModes.beginUpdate(); 
      const dragMode = new lt.Controls.ImageViewerDragInteractiveMode(); 
      viewer.interactiveModes.insert(0, dragMode); 
      viewer.interactiveModes.endUpdate(); 
 
      const getOpName = (value) => { 
         const enumOb = lt.Controls.ImageViewerItemDragDropOperation; 
         for (const prop in enumOb) { 
            if (enumOb.hasOwnProperty(prop)) { 
               if (enumOb[prop] === value) 
                  return prop; 
            } 
         } 
         return null; 
      } 
 
      let previousOp = null; 
 
      // Drag items to use 
      viewer.itemDragDrop.add((sender, e) => { 
         if (previousOp === e.operation) 
            return; 
         previousOp = e.operation; 
 
         const sourceItem = e.sourceItem; 
         const sourceImageViewer = e.sourceImageViewer; 
         const targetItem = e.targetItem; 
         const targetImageViewer = e.targetImageViewer; 
 
         // Log all the information to the console 
         console.log({ 
            operation: getOpName(e.operation), 
            sourceItem: sourceItem && sourceImageViewer.items.indexOf(sourceItem), 
            sourceImageViewer: sourceImageViewer, 
            targetItem: targetItem && targetImageViewer && targetImageViewer.items.indexOf(targetItem), 
            targetImageViewer: targetImageViewer 
         }); 
      }); 
   } 
}

export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   imageViewer = null; 
   // Generic state value used by the examples 
   timesClicked = 0; 
 
   constructor(callback) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
}

<!doctype html> 
<html lang="en"> 
<title>Controls Example | ItemDragonDrop</title> 
 
<head> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
   <script src="../../LT/Leadtools.js"></script> 
   <script src="../../LT/Leadtools.Controls.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Engine.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Designers.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Automation.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Main.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Color.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Core.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Effects.js"></script> 
   <script src="../../LT/Leadtools.Document.js"></script> 
   <script src="../../LT/Leadtools.Document.Viewer.js"></script> 
   <style> 
      body { 
         font-family: 'Segoe UI', sans-serif; 
      } 
 
      #imageViewerDiv { 
         border: 1px solid #888; 
         width: 500px; 
         height: 500px; 
         background-color: #eee; 
      } 
   </style> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body> 
   <p>Press and drag on the image to pan.</p> 
   <p>Hold down the control key and press and drag on the image or pinch with two fingers to zoom in and out.</p> 
   <div> 
      <button type="button" id="exampleButton">Run Example</button> 
   </div> 
   <div id="imageViewerDiv"></div> 
   <div id="output"></div> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.ImageViewer.ItemDragDrop(); 
   }; 
</script> 
</html>

Requirements

Target Platforms

Reference

ImageViewerDragInteractiveMode Members

Leadtools.Controls Namespace

Download our FREE evaluation

Help Version 22.0.2023.2.4

Leadtools.Controls Assembly

Introduction

Getting Started

Namespaces

Leadtools.Controls Namespace

Assemblies