macOS development - Basic use Drag & Drop drag

---

I. Overview

If the application has moved to the text, files, images, copy operation, Drag & Drop is very efficient and intuitive.

---

Second, the relevant category and protocol

Drag and related classes of protocols located AppKit

• NSDraggingImageComponent
• NSDraggingItem
• NSDraggingSession

protocols

• NSDraggingInfo
• NSDraggingDestination
• NSDraggingSource
• NSSpringLoadingDestination

---

Draggable object, NSDraggingSource need to comply with the agreement;

It can be used as an object drag and drop target, compliance NSDraggingDestination agreement.

AppKit hides all the details of dragging the mouse to track and display view.

NSWindow and NSView object can become a resource and destination of drags.

---

Third, the use

Let's go directly to use, and then started to learn more about it now, presented here as a simple to use NSView sample receiving end of it. Reference Demo:
https://github.com/huangqizai/Mac_DragDrop

---

1. Construction of view

Creating OneView inherits from NSView;
add a NSImageView OneView to get on the drag effect.

@interface OneView : NSView

@end


@interface OneView (){
    BOOL isReceivingDrag;  //是否正在拖拽操作
}
@property (nonatomic, strong) NSImageView *iconView;

@end

---

@implementation OneView

- (void)drawRect:(NSRect)dirtyRect {
    [super drawRect:dirtyRect];
    
    if (isReceivingDrag) {
        [[NSColor redColor] set];  //进入时，边框颜色变红
      
    }else{
        
        [[NSColor blueColor] set];  //正常状态下，边框颜色为蓝
    }
    
    NSBezierPath *path = [NSBezierPath bezierPathWithRect:dirtyRect];
    path.lineWidth = 2;
    [path stroke];
}



-(instancetype)initWithFrame:(NSRect)frameRect{
    
    self = [super initWithFrame:frameRect];
    
    self.wantsLayer = YES;
    self.layer.backgroundColor = [NSColor cyanColor].CGColor;
    
    self.iconView = [[NSImageView alloc]initWithFrame:NSMakeRect(5, 5, 470, 350)];
    [self addSubview:self.iconView];
    
    self.iconView.wantsLayer = YES;
    self.iconView.layer.backgroundColor = [NSColor yellowColor].CGColor;
    
    [self registerForDraggedTypes:@[NSPasteboardTypeFileURL, NSPasteboardTypePNG]];  // 注册拖拽类型
    
    return self;
}

Click NSView into the header file, you will find that it has complied with NSDraggingDestination agreement, so here we do not need to add protocol again.

---

2, add the proxy method NSDraggingDestination

#pragma mark - NSDraggingDestination

// 拖拽结束后调用（无论是否拖拽成功）
-(void)draggingEnded:(id<NSDraggingInfo>)sender{
    NSLog(@"-- draggingEnded");
    
    isReceivingDrag = NO;
    [self setNeedsDisplay:YES];
}


// 拖进来但没放下时调用
-(void)draggingExited:(id<NSDraggingInfo>)sender{
    NSLog(@"-- draggingExited");
    
}

/*
 拖动数据进入来时调用
 可以在这里判断数据是什么类型
*/
-(NSDragOperation)draggingEntered:(id<NSDraggingInfo>)sender{
    
    isReceivingDrag = YES;
    [self setNeedsDisplay:YES];
    
    NSPasteboard *pb = [sender draggingPasteboard];
    
    NSLog(@"-- draggingEntered \n pboard types : %@",[pb types]);

    if ([[pb types] containsObject:NSPasteboardTypeFileURL]) {
        return NSDragOperationCopy;
    }
    
    return NSDragOperationNone;
}

/*
 松开鼠标时会触发，可以在这里处理接收到的数据
*/
-(BOOL)prepareForDragOperation:(id<NSDraggingInfo>)sender{
    // 1）、获取拖动数据中的粘贴板
    NSPasteboard *pb = [sender draggingPasteboard];
    
    // 2）、从粘贴板中提取我们想要的NSFilenamesPboardType数据，这里获取到的是一个文件链接的数组，里面保存的是所有拖动进来的文件地址，如果你只想处理一个文件，那么只需要从数组中提取一个路径就可以了。
    NSArray *list = [pb propertyListForType:NSFilenamesPboardType];
    if (list.count > 0) {
        NSString *path = list.firstObject;
        self.iconView.image = [[NSImage alloc] initWithContentsOfFile:path];
    }
    
    
    NSLog(@"list : %@",list);
    
    return YES;
}

---

3, view operating results

---

The effect of the application up and running initialization

---

When drag and drop images (red border)

---

Down after

---

Fourth, functional design

About design features, it is best to read the following documents to the rational application of different occasions.

https://developer.apple.com/design/human-interface-guidelines/macos/user-interaction/drag-and-drop/

When planning Drag & Drop function, it is best to consider the following points:

• Alternatively other functions, can achieve the same effect Drag & Drop;
• Let Drag & Drop operation reversible, in order to prevent user errors;
• Drag & Drop may produce effects moved or copied. In general, in the same application, the document (even a different window), a more meaningful movement. Between different applications, documents, or disk, copy the more meaningful.

For drag

• The best you can drag and drop files selected by the user to the destination. Do not choose to do this process, interrupted.
• Allows the user to drag and drop selected text from the inactive window. a background selection.

---

V. REFERENCE

The official introduction

– Documentation Archive: Drag and Drop Programming Topics
https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/DragandDrop/DragandDrop.html

– Introduction to Drag and Drop
https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/DragandDrop/DragandDrop.html

– Human Interface Guidelines ：Drag and Drop
https://developer.apple.com/design/human-interface-guidelines/macos/user-interaction/drag-and-drop/

- drag & drop iOS in
https://developer.apple.com/documentation/uikit/drag_and_drop

- Use Drag and Drop in outlineView in
https://developer.apple.com/documentation/appkit/cocoa_bindings/navigating_hierarchical_data_using_outline_and_split_views?language=objc

---

Course

– Warren Burton : Drag and Drop Tutorial for macOS
https://www.raywenderlich.com/1016-drag-and-drop-tutorial-for-macos

Related translation: https: //juejin.im/post/5b39ca1b51882574eb599a1c

– Beginning macOS Programming: Learn to Develop an Image Uploader App in Swift
https://www.appcoda.com/macos-image-uploader-app/

- ywhades: macOS drag and drop Drag and Drop
https://juejin.im/post/5b39ca1b51882574eb599a1c