More Related Content Similar to Html 5 native drag
Similar to Html 5 native drag (20) More from Weizhong Yang (20) Html 5 native drag2. 話說…
• 有次聽了一位資深 Web Developer 發表
關於 HTML 5 的演講,裡頭提到 Native
Drag
• …聽完覺得完全沒搔到癢處
• …果然要講跟 Native 有關的東西,你還
是得要玩過一點 Native 的東西才行
3. 在 Native Drag 之前?
• 網頁上的 Drag and Drop,其實就只是讓
某個 HTML Element 移動位置而已
• 讓某個 HTML Element 跟著滑鼠
• 拉範圍不能超過目前網頁
4. Native Drag
• 將要透過 Drag and Drop 交換的資料寫入
系統剪貼簿
• Mac OS X:NSPasteboard
• 透過系統 API 設定滑鼠游標圖片
7. 以前的作法
• 如果想將 HTML 中出現一個可以 拉到
瀏覽器之外的 custom 資料,我們需要寫
一個瀏覽器 plug-in
• 瀏覽器 plug-in 就是在瀏覽器畫面中 出
一塊 Native View,裡頭的實作當然就是
Native 的,於是可以用 Native 方式交換
8. 瀏覽器 Plug-in
• Windows:可能要寫 ActiveX Control,
會有一堆安全性問題…
• Mac OS X:原本 WebKit Plug-in 超好寫,
但是 10.7 Lion 之後禁止 Safari 載入
WebKit Plug-in…
13. JavaScript
• 要讓一個 HTML Element 變成可以用
Native Drag 拉
• 加上 CSS 屬性:-webkit-user-drag:
element;
• 加上 ondragstart 的 handler
• <div style=”-webkit-user-drag: element;”
15. Objective C
• 冊可以 Drop 的 Data Type
• [self.tableView registerForDraggedTypes:@[@”key”]];
• NSView 需要實作 NSDraggingDestination
才能支援 Drop 資料
• NSTableView DataSource 需要實作兩個
method
16. Objective C
- (NSDragOperation)tableView:(NSTableView *)tableView
validateDrop:(id <NSDraggingInfo>)info proposedRow:
(NSInteger)row proposedDropOperation:
(NSTableViewDropOperation)dropOperation
{
NSPasteboard *pasteBoard = [info draggingPasteboard];
NSString *value = [pasteBoard stringForType:@”key”];
if (value) {
return NSDragOperationCopy;
}
return NSDragOperationNone;
}
17. setData()
• JavaScript 會透過 dataTransfer 物件的
setData() 與 getData() 交換資料
• …但是裡頭的資料目前只能夠是字串,
如果是 array 等物件,會變成 [object
Object] 類字串
• 所以如果是複雜的資料,我們可以一次
18. setData()
• 既然只能用字串…
• 把 JavaScript 物件透過 JSON.stringify()
與 JSON.parse() 轉成字串
• Objective C 可以用 NSJSONSerialization
或是其他第三方 JSON Parser
19. 查看全部剪貼簿內容?
Pasteboard Peeker
蘋果雖然說 Deprecated,但是還是很好用
21. Objective C
• NSView 只要實作一個 method 就可以開
始 Drag 東西出來
• dragImage:at:offset:event:pasteboard:sour
ce:slideBack:
• NSTableView DataSource 則是要實作
tableView:writeRowsWithIndexes:toPasteb
22. Objective C
- (BOOL)tableView:(NSTableView *)tableView
writeRowsWithIndexes:(NSIndexSet *)rowIndexes
toPasteboard:(NSPasteboard *)pboard
{
[pboard declareTypes:@[@”key”];
[pboard setString:@"Value String"
forType:@”key”];
return YES;
}
23. JavaScript
• 要讓一個 HTML Element 變成可以接受
Drop
• 加上 CSS 屬性:-webkit-user-drop:
element;
• 加上 ondragenter、ondragover、ondrop
等 handler
Editor's Notes \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n