ItemDragDrop Event

JavaScript

add_itemDragDrop(function(sender, e))
itemDragDrop.add(function(sender, e))
remove_itemDragDrop(function(sender, e))
itemDragDrop.remove(function(sender, e))

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

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;
   }
});

Parameter	Type	Description
sender	'var'	The source of the event.
e	ImageViewerItemDragDropEventArgs	The event data.

Reference

ImageViewer Object
ImageViewer Members