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
$473.06
Apple Inc.
+5.70
MSFT
$32.24
Microsoft Corpora
-0.64
GOOG
$881.20
Google Inc.
-4.31

MacTech Search:
Community Search:

Software Updates via MacUpdate

TrailRunner 3.7.746 - Route planning for...
Note: While the software is classified as freeware, it is actually donationware. Please consider making a donation to help stimulate development. TrailRunner is the perfect companion for runners,... Read more
VueScan 9.2.23 - Scanner software with a...
VueScan is a scanning program that works with most high-quality flatbed and film scanners to produce scans that have excellent color fidelity and color balance. VueScan is easy to use, and has... Read more
Acorn 4.1 - Bitmap image editor. (Demo)
Acorn is a new image editor built with one goal in mind - simplicity. Fast, easy, and fluid, Acorn provides the options you'll need without any overhead. Acorn feels right, and won't drain your bank... Read more
Mellel 3.2.3 - Powerful word processor w...
Mellel is the leading word processor for OS X, and has been widely considered the industry standard since its inception. Mellel focuses on writers and scholars for technical writing and multilingual... Read more
Iridient Developer 2.2 - Powerful image...
Iridient Developer (was RAW Developer) is a powerful image conversion application designed specifically for OS X. Iridient Developer gives advanced photographers total control over every aspect of... Read more
Delicious Library 3.1.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
Epson Printer Drivers for OS X 2.15 - Fo...
Epson Printer Drivers includes the latest printing and scanning software for OS X 10.6, 10.7, and 10.8. Click here for a list of supported Epson printers and scanners.OS X 10.6 or laterDownload Now Read more
Freeway Pro 6.1.0 - Drag-and-drop Web de...
Freeway Pro lets you build websites with speed and precision... without writing a line of code! With it's user-oriented drag-and-drop interface, Freeway Pro helps you piece together the website of... Read more
Transmission 2.82 - Popular BitTorrent c...
Transmission is a fast, easy and free multi-platform BitTorrent client. Transmission sets initial preferences so things "Just Work", while advanced features like watch directories, bad peer blocking... Read more
Google Earth Web Plug-in 7.1.1.1888 - Em...
Google Earth Plug-in and its JavaScript API let you embed Google Earth, a true 3D digital globe, into your Web pages. Using the API you can draw markers and lines, drape images over the terrain, add... Read more

The D.E.C Provides Readers With An Inter...
The D.E.C Provides Readers With An Interactive Comic Book Platform Posted by Andrew Stevens on August 13th, 2013 [ permalink ] | Read more »
Choose ‘Toons: Choose Your Own Adventure...
As a huge fan of interactive fiction thanks to a childhood full of Fighting Fantasy and Choose Your Own Adventure books, it’s been a pretty exciting time on the App Store of late. Besides Tin Man Games’s steady conquering of all things Fighting... | Read more »
Premier League Kicks Off This Week; Watc...
Premier League Kicks Off This Week; Watch Every Single Match Live Via NBC Sports Live Extra and Your iPhone or iPad Posted by Jeff Scott on August 13th, 2013 [ permalink ] | Read more »
Meet Daniel Singer, the Thirteen-Year-Ol...
Ever had the idea for an app, but felt like the lack of programming and design ability was a bit of a non-starter? Well, 13-year-old Daniel Singer has made an app. He’s the designer of Backdoor, a chat app that lets users chat with their friends... | Read more »
Flashout 2 Gets Revealed, Offers Up An E...
Flashout 2 Gets Revealed, Offers Up An Enhanced Career Mode and Exciting New Circuits Posted by Andrew Stevens on August 13th, 2013 [ permalink ] | Read more »
Mickey Mouse Clubhouse Paint and Play HD...
Mickey Mouse Clubhouse Paint and Play HD Review By Amy Solomon on August 13th, 2013 Our Rating: :: 3-D FUNiPad Only App - Designed for the iPad Color in areas of the Mickey Mouse Clubhouse with a variety of art supplies for fun 3-... | Read more »
Strategy & Tactics: World War II Upd...
Strategy & Tactics: World War II Update Adds Two New Scenarios Posted by Andrew Stevens on August 12th, 2013 [ permalink ] Universal App - Designed for iPhone and iPad | Read more »
Expenses Planner Review
Expenses Planner Review By Angela LaFollette on August 12th, 2013 Our Rating: :: PLAIN AND SIMPLEUniversal App - Designed for iPhone and iPad Expenses Planner keeps track of future bills through due date reminders, and it also... | Read more »
Kinesis: Strategy in Motion Brings An Ad...
Kinesis: Strategy in Motion Brings An Adaptation Of The Classic Strategic Board Game To iOS Posted by Andrew Stevens on August 12th, 2013 [ | Read more »
Z-Man Games Creates New Studio, Will Bri...
Z-Man Games Creates New Studio, Will Bring A Digital Version of Pandemic! | Read more »

Price Scanner via MacPrices.net

Apple refurbished iPads and iPad minis availa...
 Apple has Certified Refurbished iPad 4s and iPad minis available for up to $140 off the cost of new iPads. Apple’s one-year warranty is included with each model, and shipping is free: - 64GB Wi-Fi... Read more
Snag an 11-inch MacBook Air for as low as $74...
 The Apple Store has Apple Certified Refurbished 2012 11″ MacBook Airs available starting at $749. An Apple one-year warranty is included with each model, and shipping is free: - 11″ 1.7GHz/64GB... Read more
15″ 2.3GHz MacBook Pro (refurbished) availabl...
 The Apple Store has Apple Certified Refurbished 15″ 2.3GHz MacBook Pros available for $1449 or $350 off the cost of new models. Apple’s one-year warranty is standard, and shipping is free. Read more
15″ 2.7GHz Retina MacBook Pro available with...
 Adorama has the 15″ 2.7GHz Retina MacBook Pro in stock for $2799 including a free 3-year AppleCare Protection Plan ($349 value), free copy of Parallels Desktop ($80 value), free shipping, plus NY/NJ... Read more
13″ 2.5GHz MacBook Pro on sale for $150 off M...
B&H Photo has the 13″ 2.5GHz MacBook Pro on sale for $1049.95 including free shipping. Their price is $150 off MSRP plus NY sales tax only. B&H will include free copies of Parallels Desktop... Read more
iPod touch (refurbished) available for up to...
The Apple Store is now offering a full line of Apple Certified Refurbished 2012 iPod touches for up to $70 off MSRP. Apple’s one-year warranty is included with each model, and shipping is free: -... Read more
27″ Apple Display (refurbished) available for...
The Apple Store has Apple Certified Refurbished 27″ Thunderbolt Displays available for $799 including free shipping. That’s $200 off the cost of new models. Read more
Apple TV (refurbished) now available for only...
The Apple Store has Apple Certified Refurbished 2012 Apple TVs now available for $75 including free shipping. That’s $24 off the cost of new models. Apple’s one-year warranty is standard. Read more
AnandTech Reviews 2013 MacBook Air (11-inch)...
AnandTech is never the first out with Apple new product reviews, but I’m always interested in reading their detailed, in-depth analyses of Macs and iDevices. AnandTech’s Vivek Gowri bought and tried... Read more
iPad, Tab, Nexus, Surface, And Kindle Fire: W...
VentureBeat’s John Koetsier says: The iPad may have lost the tablet wars to an army of Android tabs, but its still first in peoples hearts. Second place, however, belongs to a somewhat unlikely... Read more

Jobs Board

Sales Representative - *Apple* Honda - Appl...
APPLE HONDA AUTOMOTIVE CAREER FAIR! NOW HIRING AUTO SALES REPS, AUTO SERVICE BDC REPS & AUTOMOTIVE BILLER! NO EXPERIENCE NEEDED! Apple Honda is offering YOU a Read more
*Apple* Developer Support Advisor - Portugue...
Changing the world is all in a day's work at Apple . If you love innovation, here's your chance to make a career of it. You'll work hard. But the job comes with more than Read more
RBB - *Apple* OS X Platform Engineer - Barc...
RBB - Apple OS X Platform Engineer Ref 63198 Country USA…protected by law. Main Function | The engineering of Apple OS X based solutions, in line with customer and Read more
RBB - Core Software Engineer - Mac Platform (...
RBB - Core Software Engineer - Mac Platform ( Apple OS X) Ref 63199 Country USA City Dallas Business Area Global Technology Contract Type Permanent Estimated publish end Read more
*Apple* Desktop Analyst - Infinity Consultin...
Job Title: Apple Desktop Analyst Location: Yonkers, NY Job Type: Contract to hire Ref No: 13-02843 Date: 2013-07-30 Find other jobs in Yonkers Desktop Analyst The Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.