TweetFollow Us on Twitter

The Ins and Outs of Drag and Drop

Volume Number: 18 (2002)
Issue Number: 11
Column Tag: Mac OS X

The Ins and Outs of Drag and Drop

by Andrew C. Stone

The most copied feature of the Mac OS X interface is the ubiquitous drag and drop. When NeXTStep advanced the techniques pioneered at Xerox's Palo Alto Research Center in the late '80's, the way in which people interacted with software was changed forever. The ability to move data and objects seamlessly between windows and applications without any additional steps is the hallmark of a native OS X application. This article will explore some more advanced techniques and some of the issues you might encounter when preparing your interface for drag and drop, as covered in other MacTech articles, such as http://www.stone.com/The_Cocoa_Files/What_a_Drag_.html. We'll cover making an entire window a receptacle for drag and drop, using central control to reduce code, dealing with temporary subviews such as field editors, and auto-swapping Tab views based on the type of data being dropped.

Many of Stone Design's applications fit into the category of "just drag and drop and you're done," such as PStill, GIFfun, PackUpAndGo, DOCtor and SliceAndDice. Taking PStill as an example, the user just drags a file onto the PStill window or application tile in the Dock or the Finder to convert the file to or redistill it as PDF:



Drag files onto Dock or Window

The strategy I like to employ is to make the entire window a valid drag target by subclassing NSWindow or NSPanel, and forwarding the actual methods to the window's delegate:

@interface NSObject(implement_this_in_delegate)
- (void)registerTypesForPanel:(NSPanel *)panel;
@end
@interface SDDragInPanel : NSPanel
{}
@end
@implementation SDDragInPanel
- (void)awakeFromNib
{
   [[self delegate] registerTypesForPanel:self];
}
- (unsigned int) draggingEntered:sender
{
    return [[self delegate] draggingEntered:sender];
}
- (unsigned int) draggingUpdated:sender
{
    return [[self delegate] draggingUpdated:sender];
}
- (BOOL) prepareForDragOperation:sender
{
        return [[self delegate] prepareForDragOperation:sender];
}
- (BOOL) performDragOperation:(id <NSDraggingInfo>)sender
{
    return [[self delegate] performDragOperation:sender];
}
@end

Typical code for delegate would be:

// Dragging stuff:
- (NSArray *)acceptableDragTypes{
    return [NSArray arrayWithObjects:NSFilenamesPboardType,nil];
}
- (void)registerTypesForPanel:(NSPanel *)panel;
{
   [panel registerForDraggedTypes:[self acceptableDragTypes]];
}
- (unsigned int)draggingEnteredOrUpdated:(id <NSDraggingInfo>)sender {
    // we want to ignore drags originating in our own window:
    if ([sender draggingSource] == dragWellView) return NSDragOperationNone;
    else {
        unsigned int sourceMask = [sender draggingSourceOperationMask];
        NSPasteboard *pboard = [sender draggingPasteboard];
        NSString *type = [pboard availableTypeFromArray:[self acceptableDragTypes]];
        if (type) return sourceMask;
        return NSDragOperationNone;
    }
}
- (unsigned int)draggingEntered:(id <NSDraggingInfo>)sender
{
    return [self draggingEnteredOrUpdated:sender];
}
- (unsigned int)draggingUpdated:(id <NSDraggingInfo>)sender
{
    return [self draggingEnteredOrUpdated:sender];
}
- (BOOL)performDragOperation:(id <NSDraggingInfo>)sender
{
    NSPasteboard *pboard = [sender draggingPasteboard];
    NSString *type = [pboard availableTypeFromArray:[self acceptableDragTypes]];
    BOOL loaded = NO;
    id ts = nil;
    if (type) {
        if ([type isEqualToString:NSFilenamesPboardType]) {
            NSArray *files = [pboard propertyListForType:NSFilenamesPboardType];
            unsigned i = [files count];
            while (i-- > 0) {
                NSString *f = [files objectAtIndex:i];
                if ([[self acceptableFileTypes] containsObject:[f pathExtension]] && 
                (ts = [SomeObject objectWithContentsOfFile:f])!=nil) {
                    loaded = YES;
          break;
      }
            }
        }
     }
    return loaded;
}
- (BOOL)prepareForDragOperation:sender
{
    return YES;
}
Be sure to register the view for the accepted types. A good place to do this is in 
-(void)awakeFromNib. This method is called on any object instantiated in a NIB (NeXT Interface 
Builder) file that has an implementation of awakeFromNib after all the objects are created and linked 
up, but before the window appears on screen. By implementing a single method acceptableDragTypes that 
returns which types you actually accept, you can avoid out-of-synch code when you add more types to 
open later:

   [panel registerForDraggedTypes:[self acceptableDragTypes]];

So we are done, right? Not quite, because of the way NSTextFields work. When you click or tab into a text field, a shared NSTextView is inserted into the view hierarchy. When the user drags a file over any part of the window that doesn't have an active textfield, the draggingEntered works as planned. But when you pass over the active text field, the NSTextView's drag validation methods come into play. The solution is to subclass NSTextView to also forward the methods to your window's delegate - or just to the window, since the window will forward on to the delegate:

#import <Cocoa/Cocoa.h>
@interface DragTextView : NSTextView
{
}
@end
#import "DragTextView.h"
@implementation DragTextView
// override drag stuff...
- (id)initWithFrame:(NSRect)r
{
    [super initWithFrame:r];
    [self registerForDraggedTypes:[[[self window] delegate] acceptableDragTypes]];
   // this is so TAB and RETURN end editing
   // instead of being inserted into the field:
    [self setFieldEditor:YES];  
    return self;
}
// note we just pass it up to the window:
- (unsigned int) draggingEntered:sender
{
    return [[self window] draggingEntered:sender];
}
... etc, just passing on the method to the window
@end

Now we have our custom text view, but how do we make sure our text view is used in place of the standard text view? We can't set z in Interface Builder, but we can code it. If a window's delegate implements a method called -windowWillReturnFieldEditor:(NSWindow *)sender toObject:(id)client, the Appkit code will call this method and use the text view it returns if non-nil, otherwise it uses a standard text view set in field editor mode.)

// add textView as  an iVar to the NSWindowController subclass which controls the window
- (id)windowWillReturnFieldEditor:(NSWindow *)sender toObject:(id)client {
    if (sender == [self window]) {
        if (!textView) textView = [[DragTextView alloc]initWithFrame:[myField bounds]];
        return textView;
    }
    return nil;
}

At this point, our interface is ready to accept the correct files and data at any location in the window.

There's one final issue: what if a user can drag a file out of your interface (for example, in PStill, you can drag the distilled PDF file out of the "drag out well") and that file type can also be dragged in to the application (for example, PStill accepts PDF files as input). A user might start a drag out of the application, change her mind, and drop the file back onto the application window. In this case, the application should probably not process the file. Therefore, the window delegate should check the draggingSource to make sure it's not a component of the window itself. This is why we have this line in the draggingEnteredOrUpdated code above:

    if ([sender draggingSource] == dragWellView) return NSDragOperationNone;

Autoswapping Tab Views

The concept of filtering the dragging methods through the window's delegate can be very useful when your window contains an NSTabView with different acceptable types in each view. In Create(R), for example, there is a resources library which can accept art, images, effects, blends, patterns and pages:


Create(R) lets you store many different types of resources - and it will swap to the correct tab view as necessary

Each of these tabviews has an NSScrollView, which contains an NSMatrix. When a user 
drags in a certain type that is not correct for the current view, but is acceptable in another one of 
the tab views, the tab view should automatically switch to the other view so that the drag can drop 
successfully in the right place. We do this by first checking if we can deal with it - and if not, 
we'll ask the window controller (which keeps track of the other views) to check the other resource 
managers. Note we also don't want to accept drags that start from this particular resource's matrix:

- (unsigned int)draggingEntered:(id <NSDraggingInfo>)sender
{
   return [self draggingEnteredOrUpdated:sender checkOthers:YES];
}
- (unsigned int)draggingUpdated:(id <NSDraggingInfo>)sender
{
    return [self draggingEnteredOrUpdated:sender checkOthers:YES];
}
- (unsigned int)draggingEnteredOrUpdated:(id <NSDraggingInfo>)sender 
checkOthers:(BOOL)checkOthers
{
    if ([sender draggingSource] == dragMatrix) return NSDragOperationNone;
    else {
        NSPasteboard *pboard = [sender draggingPasteboard];
        NSString *type = [pboard availableTypeFromArray:[self acceptableDraggedTypes]];
        if (type) {
            unsigned int sourceMask = [sender draggingSourceOperationMask];
            if ([type isEqualToString:NSFilenamesPboardType]) {
                NSArray *filenames = [pboard propertyListForType:NSFilenamesPboardType];
                if ([filenames count] == 1) {
                    NSString *filename = [filenames objectAtIndex:0];
                    if ([[[self resourceClass] fileTypes] containsObject:
         [filename pathExtension]])
                     return sourceMask;
                }
            } else return sourceMask;
        }
    }
    if (checkOthers) return [_controller draggingEnteredOrUpdated:sender];
    else return NSDragOperationNone;
}

The _controller's implementation might look something like this:

- (unsigned int)draggingEnteredOrUpdated:(id <NSDraggingInfo>)sender
{
    int i, c = [_resourceSources count];
    unsigned int returnValue;
    for (i = 0; i < c; i++) {
        ResourceSource *res = [_resourceSources objectAtIndex:i];
   if (res == _currentSource) continue;   // already checked!
        if ((returnValue = [res draggingEnteredOrUpdated:sender checkOthers:NO]) 
        != NSDragOperationNone) {
            [self showResourceSourceNamed:[res resourceSourceName]];
       return returnValue;
        }
    }
    return NSDragOperationNone;
}
- (void)showResourceSourceNamed:(NSString *)name
{
    [tabView selectTabViewItemAtIndex:[tabView indexOfTabViewItemWithIdentifier:name]];
}

Because the matrix may not fill the scroll view entirely, we'll also have to subclass the scroll view to forward draggingEntered methods to the matrix. To the end user, the entire scroll view is seen as the target, not just the matrix!

- (unsigned int)draggingEntered:(id <NSDraggingInfo>)sender
{
    return [[self documentView]draggingEntered:sender];
}

... etc. for all the other methods.

Application Tile Drag Support

You only have to perform a few tasks to add support for drag and drop to your Application icon and its Dock tile. First, you'll need to alert the system of the valid file types handled by your application. Then, you'll implement a method in the Application's delegate subclass which calls the actual method to deal with that file type.

First, add information about which files can be opened by your application in Project Builder's application Target Inspector, in the "Document Types" pane:


Be sure to add the file types that your application can open in Project Builder

Second, set your application's delegate. You can do this programmatically with NSApplication's setDelegate:. Or, you can use Interface Builder: (a) instantiate an object of your delegate class in your main NIB file, and (b) connect the File's Owner instance variable "delegate" to this new object.

Third, implement a single method in your delegate's class:

- (BOOL)application:(NSApplication *)sender openFile:(NSString *)path
{
   MyDocument *doc = [[NSDocumentController sharedDocumentController] 
   openDocumentWithContentsOfFile:path display:YES];
   return doc;
}

Now, not only will the dock tile accept drag and drop, but Finder will display your application as a choice for opening that kind of document.

Conclusion

If you want your application to really sing, be sure users can take full advantage of drag and drop everywhere! Not only will it make program interaction easier and more fun, it makes demoing the app more spectacular!


Andrew Stone is founder, janitor and chief computer scientist at Stone Design, www.stone.com.

 
AAPL
$104.83
Apple Inc.
+1.84
MSFT
$45.02
Microsoft Corpora
+0.64
GOOG
$543.98
Google Inc.
+11.27

MacTech Search:
Community Search:

Software Updates via MacUpdate

Delicious Library 3.3.2 - Import, browse...
Delicious Library allows you to import, browse, and share all your books, movies, music, and video games with Delicious Library. Run your very own library from your home or office using our... Read more
Art Text 2.4.8 - Create high quality hea...
Art Text is an OS X application for creating high quality textual graphics, headings, logos, icons, Web site elements, and buttons. Thanks to multi-layer support, creating complex graphics is no... Read more
Live Interior 3D Pro 2.9.6 - Powerful an...
Live Interior 3D Pro is a powerful yet very intuitive interior designing application. View Video Tutorials It has every feature of Live Interior 3D Standard, plus some exclusive ones: Create multi... Read more
The Hit List 1.1.7 - Advanced reminder a...
The Hit List manages the daily chaos of your modern life. It's easy to learn - it's as easy as making lists. And it's powerful enough to let you plan, then forget, then act when the time is right.... Read more
jAlbum Pro 12.2.4 - Organize your digita...
jAlbum Pro has all the features you love in jAlbum, but comes with a commercial license. With jAlbum, you can create gorgeous custom photo galleries for the Web without writing a line of code!... Read more
jAlbum 12.2.4 - Create custom photo gall...
With jAlbum, you can create gorgeous custom photo galleries for the Web without writing a line of code! Beginner-friendly, with pro results Simply drag and drop photos into groups, choose a design... Read more
ExpanDrive 4.1.7 - Access remote files o...
ExpanDrive builds cloud storage in every application, acts just like a USB drive plugged into your Mac. With ExpanDrive, you can securely access any remote file server directly from the Finder or... Read more
OmniOutliner Pro 4.1.3 - Pro version of...
OmniOutliner Pro is a flexible program for creating, collecting, and organizing information. Give your creativity a kick start by using an application that's actually designed to help you think. It'... Read more
Evernote 5.6.2 - Create searchable notes...
Evernote allows you to easily capture information in any environment using whatever device or platform you find most convenient, and makes this information accessible and searchable at anytime, from... Read more
OmniOutliner 4.1.3 - Organize your ideas...
OmniOutliner is a flexible program for creating, collecting, and organizing information. Give your creativity a kick start by using an application that's actually designed to help you think. It's... Read more

Latest Forum Discussions

See All

A Few Days Left (Games)
A Few Days Left 1.01 Device: iOS Universal Category: Games Price: $3.99, Version: 1.01 (iTunes) Description: Screenshots are in compliance to App Store's 4+ age rating! Please see App Preview for real game play! **Important: Make... | Read more »
Toca Boo (Education)
Toca Boo 1.0.2 Device: iOS Universal Category: Education Price: $2.99, Version: 1.0.2 (iTunes) Description: BOO! Did I scare you!? My name is Bonnie and my family loves to spook! Do you want to scare them back? Follow me and I'll... | Read more »
Intuon (Games)
Intuon 1.1 Device: iOS Universal Category: Games Price: $.99, Version: 1.1 (iTunes) Description: Join the battle with your intuition in a new hardcore game Intuon! How well do you trust your intuition? Can you find a needle in a... | Read more »
Ravenous Rampage (Games)
Ravenous Rampage 1.0 Device: iOS Universal Category: Games Price: $.99, Version: 1.0 (iTunes) Description: | Read more »
Partia 2 (Games)
Partia 2 1.0.1 Device: iOS Universal Category: Games Price: $5.99, Version: 1.0.1 (iTunes) Description: Partia 2 is a SRPG (Strategy Role-playing) video game inspired by Fire Emblem and Tear Ring Saga series. In a high fantasy... | Read more »
Puzzle to the Center of the Earth Review
Puzzle to the Center of the Earth Review By Campbell Bird on October 23rd, 2014 Our Rating: :: SPELUNKING PUZZLESUniversal App - Designed for iPhone and iPad Do some puzzles to make some platforms in this smart and fun free-to-play... | Read more »
Sleep Attack TD Review
Sleep Attack TD Review By Jennifer Allen on October 23rd, 2014 Our Rating: :: A TRUE TWISTUniversal App - Designed for iPhone and iPad Sleep Attack TD is a tower defense game with a difference – you can rotate the layout – and it’s... | Read more »
Mecanic (Education)
Mecanic 1.0 Device: iOS Universal Category: Education Price: $1.99, Version: 1.0 (iTunes) Description: Plates, screws, wheels ... Everything you need to achieve whatever you want... MECHANICWith 'MECANIC' kids will have fun... | Read more »
Earn Your Master Camper Badge in Camp Po...
Earn Your Master Camper Badge in Camp Pokemon Posted by Jessica Fisher on October 23rd, 2014 [ permalink ] Universal App - Designed for iPhone and iPad | Read more »
Garruk Gets His Revenge in a New Magic 2...
Garruk Gets His Revenge in a New Magic 2015 Expansion, Coming This November Posted by Jessica Fisher on October 23rd, 2014 [ permalink ] | Read more »

Price Scanner via MacPrices.net

Save up to $125 on Retina MacBook Pros
B&H Photo has the new 2014 13″ and 15″ Retina MacBook Pros on sale for up to $125 off MSRP. Shipping is free, and B&H charges NY sales tax only. They’ll also include free copies of Parallels... Read more
Apple refurbished Time Capsules available sta...
The Apple Store has certified refurbished Time Capsules available for up to $60 off MSRP. Apple’s one-year warranty is included with each Time Capsule, and shipping is free: - 2TB Time Capsule: $255... Read more
Textilus New Word, Notes and PDF Processor fo...
Textilus is new word-crunching, notes, and PDF processor designed exclusively for the iPad. I haven’t had time to thoroughly check it out yet, but it looks great and early reviews are positive.... Read more
WD My Passport Pro Bus-Powered Thunderbolt RA...
WD’s My Passport Pro RAID solution is powered by an integrated Thunderbolt cable for true portability and speeds as high as 233 MB/s. HighlightsOverviewSpecifications Transfer, Back Up And Edit In... Read more
Save with Best Buy’s College Student Deals
Take an additional $50 off all MacBooks and iMacs at Best Buy Online with their College Students Deals Savings, valid through November 1st. Anyone with a valid .EDU email address can take advantage... Read more
iPad Air 2 & iPad mini 3 Best Tablets Yet...
The new iPads turned out to be pretty much everything I’d been hoping for and more than I’d expected.”More” particularly in terms of a drinking-from-a-firehose choice of models and configurations,... Read more
Drafts 4 Reinvents iOS Productivity App
N Richland Hills, Texas based Agile Tortoise has announced the release of Drafts 4 for iPhone and iPad. Drafts is a quick capture note taking app with flexible output actions. Drafts 4 scales from... Read more
AT&T accepting preorders for new iPads fo...
AT&T Wireless is accepting preorders for the new iPad Air 2 and iPad mini 3, cellular models, for $100 off MSRP with a 2-year service agreement: - 16GB iPad Air 2 WiFi + Cellular: $529.99 - 64GB... Read more
Apple offering refurbished Mac Pros for up to...
The Apple Store is offering Apple Certified Refurbished 2013 Mac Pros for up to $600 off the cost of new models. An Apple one-year warranty is included with each Mac Pro, and shipping is free. The... Read more
Select MacBook Airs $100 off MSRP, free shipp...
B&H Photo has 2014 a couple of MacBook Airs on sale for $100 off MSRP. Shipping is free, and B&H charges NY sales tax only. They also include free copies of Parallels Desktop and LoJack for... Read more

Jobs Board

*Apple* Solutions Consultant - Apple Inc. (U...
…important role that the ASC serves is that of providing an excellent Apple Customer Experience. Responsibilities include: * Promoting Apple products and solutions Read more
Senior Event Manager, *Apple* Retail Market...
…This senior level position is responsible for leading and imagining the Apple Retail Team's global event strategy. Delivering an overarching brand story; in-store, Read more
*Apple* Solutions Consultant (ASC) - Apple (...
**Job Summary** The ASC is an Apple employee who serves as an Apple brand ambassador and influencer in a Reseller's store. The ASC's role is to grow Apple Read more
Project Manager / Business Analyst, WW *Appl...
…a senior project manager / business analyst to work within our Worldwide Apple Fulfillment Operations and the Business Process Re-engineering team. This role will work Read more
*Apple* Retail - Multiple Positions (US) - A...
Job Description: Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.