ImageViewerDragInteractiveMode Object

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>