Tutorial :Cocoa: How to morph a drag image while dragging


In Interface Builder.app (and some other cocoa apps), image dragging has a very nice/sexy effect of morphing the drag image while you drag a draggable item out of its window.

For example in Interface Buildler.app:

  1. Show the Library Palette (⇧⌘L, or Tools Menu -> Library)
  2. Drag an item out of the Library palette

NOTE: as you drag the item out of the Library Palette window, it morphs from an image of the original list item to an image of the icon of the dragged item.

I have fully implemented drag and drop in my Application using the normal Cocoa NSDragSource/NSDragDestination facilities.

However, I can't find a hook for doing this image morph while dragging. I'm returning the initial drag image by overriding

-[NSView dragImage:at:offset:event:pasteboard:source:slideBack:]  

But this is only called at the beginning of the drag.

How do you signal that you would like to replace the current drag image (ideally using the sexy morph effect).


You guys beat me to it. :-)

Yes, JLNDragEffectManager is open source (with attribution in your apps, please) and available on my blog. It should work fine as-is with no modification back to 10.5, but I'm not sure back any further. Others linked to it (and it's easily googleable), so to avoid self-congratulatory blog linking, I'll leave it at that.

Issues: One developer commented on (and submitted code to fix) the lack of dragging offset support. I've just not gotten around to posting the update. That's the only outstanding issue I'm aware of.

Improvements: I'd like to add multiple "zones" (say, one per document, so dragging from doc to doc keeps table rows looking like table rows, but anywhere outside doc windows turns them into a file icon a la HFS Promise Drag). Some day ...

Design: The post itself details the reasoning behind the design and the relatively simple morphing effect (cross-fade plus size are animated using basic NSAnimation, etc.). The code (the class as well as the demo app) is thoroughly blocked out and commented.

Won't link to my own post but would love the karma of upvotes for my effort. ;-)

UPDATE: Similar (but better-integrated) functionality is available as of 10.7. If you are targeting 10.7 or higher, it's best to use the new API. JLNDragEffectManager works fine on 10.7, so it can be used for earlier-targeted versions.


JNLDragEffectManager does exactly that. :)


The API does not support this well. Joshua Nozzi gives a method that looks reasonable in this weblog post.

IB's effect isn't that fancy. It's a crossfade and scale. Hold down shift to see it more clearly.


As of 10.7+ the current approach is to use the

   enumerateDraggingItemsWithOptions:                               forView:                               classes:                         searchOptions:                            usingBlock:  

API on NSDraggingInfo. The documentation is really poor but the ADC samples like MultiPhotoFrame or TableViewPlayground can give a good idea on how to use the new mechanism.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »