itemDragDrop Event (ImageViewer)

Summary

Occurs when data is being dragged or dropped from/to this ImageViewer.

Syntax

JavaScript Syntax

Object.defineProperty(ImageViewer.prototype,'itemDragDrop',  
	get: function(), 
	set: function(value) 
) 
function itemDragDrop.add(function(sender, e)); 
function itemDragDrop.remove(function(sender, e));

TypeScript Syntax

itemDragDrop: void;

Remarks

For more information refer to Image Viewer Drag and Drop.

Example

For an example on using the image viewer as the source of a drag/drop operation, refer to ImageViewerDragInteractiveMode.

This example will show how to use the ImageViewer as the drop target of a drag/drop operation.

Start with the ImageViewer example, remove all the code inside the example function (search for the "// TODO: add example code here" comment) and insert the following code:

JavaScript Example

this._imageViewer.allowDrop = true; 
this._imageViewer.activeItem = this._imageViewer.items.item(0); 
 
var dragMode = new lt.Controls.ImageViewerDragInteractiveMode(); 
dragMode.allowedEffects = "move"; 
this._imageViewer.interactiveModes.beginUpdate(); 
dragMode = new lt.Controls.ImageViewerDragInteractiveMode(); 
this._imageViewer.interactiveModes.add(dragMode); 
this._imageViewer.interactiveModes.endUpdate(); 
       
this._imageViewer.itemDragDrop.add(function (sender, e) { 
   switch (e.operation) { 
      case lt.Controls.ImageViewerItemDragDropOperation.dragEnter: { 
         alert("DragDrop Operation: " + e.operation().toString() + " " + e.effect.toString() + " " + e.format.toString()); 
         alert("SrcViewer: " + 
            (e.sourceImageViewer != null ? e.sourceImageViewer.name : "null") + 
            " DstViewer: " +  
            (e.targetImageViewer != null ? e.targetImageViewer.name : "null")); 
         alert("  SrcItem: " + 
            (e.sourceItem != null ? e.sourceImageViewer.items.indexOf(e.sourceItem).toString() : "null") + 
            " DstItem: " + 
            (e.targetItem != null ? e.targetImageViewer.items.indexOf(e.targetItem).toString() : "null")); 
      } 
      break; 
 
      case lt.Controls.ImageViewerItemDragDropOperation.dragOver: { 
         console.log("DragDrop Operation:" + e.operation.toString() + " " + e.effect().toString() + " " + e.format.toString()); 
         console.log("  SrcViewer:" + 
            (e.sourceImageViewer != null ? e.sourceImageViewer.name : "null") + 
            "DstViewer:" + 
            (e.targetImageViewer != null ? e.targetImageViewer.name : "null")); 
         console.log("  SrcItem:" + 
            (e.sourceItem != null ? e.sourceImageViewer.items.indexOf(e.sourceItem).toString() : "null") + 
            " DstItem:" + 
            (e.targetItem != null ? e.targetImageViewer.items.indexOf(e.targetItem).toString() : "null")); 
      } 
         break; 
 
      default: 
         break; 
   } 
});