Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTML 5 Native Drag
Search
Weizhong Yang
August 26, 2012
Technology
3
500
HTML 5 Native Drag
Weizhong Yang
August 26, 2012
Tweet
Share
More Decks by Weizhong Yang
See All by Weizhong Yang
導入 Flutter 前你應該知道的事
zonble
7
1.2k
那些年,被蘋果 Ban 掉的 API
zonble
0
91
為視障朋友打造行動應用
zonble
16
1.3k
Aspect Oriented Programming
zonble
2
180
Mac OS X 與 iOS 的 Audio API
zonble
11
940
大家來寫貪食蛇
zonble
7
4.3k
Debug Debug
zonble
6
360
Retina Mac
zonble
3
210
Other Decks in Technology
See All in Technology
Agentic Workflowという選択肢を考える
tkikuchi1002
1
350
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
110
IAMのマニアックな話 2025を執筆して、 見えてきたAWSアカウント管理の現在
nrinetcom
PRO
4
650
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
2
1.6k
20250623 Findy Lunch LT Brown
3150
0
750
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.1k
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
140
菸酒生在 LINE Taiwan 的後端雙刀流
line_developers_tw
PRO
0
1.1k
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
270
知識を整理して未来を作る 〜SKDとAI協業への助走〜
yosh1995
0
130
OTFSG勉強会 / Introduction to the History of Delta Lake + Iceberg
databricksjapan
0
120
Welcome to the LLM Club
koic
0
130
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
299
21k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Fireside Chat
paigeccino
37
3.5k
Designing for Performance
lara
609
69k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Rails Girls Zürich Keynote
gr2m
94
14k
Producing Creativity
orderedlist
PRO
346
40k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Transcript
HTML 5 Native Drag 楊維中(a.k.a zonble)
[email protected]
Sunday, August 26,
話說… • 有次聽了⼀一位資深 Web Developer 發表 關於 HTML 5 的演講,裡頭提到
Native Drag • …聽完覺得完全沒搔到癢處 • …果然要講跟 Native 有關的東⻄西,你還 是得要玩過⼀一點 Native 的東⻄西才⾏行 Sunday, August 26,
在 Native Drag 之前? • 網⾴頁上的 Drag and Drop,其實就只是讓 某個
HTML Element 移動位置⽽而已 • 讓某個 HTML Element 跟著滑⿏鼠跑 • 拖拉範圍不能超過⺫⽬目前網⾴頁 Sunday, August 26,
Native Drag • 將要透過 Drag and Drop 交換的資料寫⼊入 系統剪貼簿 •
Mac OS X:NSPasteboard • 透過系統 API 設定滑⿏鼠游標圖⽚片 Sunday, August 26,
所以可以… • 瀏覽器不同網⾴頁之間拖拉資料 • 不同瀏覽器之間拖拉資料 • 瀏覽器與其他應⽤用程式之間拖拉資料 Sunday, August 26,
其實… • 瀏覽器本來就有⼀一定程度的 Native Drag,但是原本僅侷限於部分種類的資 料… • ⽂文字 • 圖⽚片
• 連結 • 但是其他⾃自定類型的資料怎麼辦? Sunday, August 26,
以前的作法 • 如果想將 HTML 中出現⼀一個可以拖拉到 瀏覽器之外的 custom 資料,我們需要寫 ⼀一個瀏覽器 plug-in
• 瀏覽器 plug-in 就是在瀏覽器畫⾯面中挖出 ⼀一塊 Native View,裡頭的實作當然就是 Native 的,於是可以⽤用 Native ⽅方式交換 資料 • 但是寫 plug-in 好⿇麻煩的啊… Sunday, August 26,
瀏覽器 Plug-in • Windows:可能要寫 ActiveX Control, 會有⼀一堆安全性問題… • Mac OS
X:原本 WebKit Plug-in 超好寫, 但是 10.7 Lion 之後禁⽌止 Safari 載⼊入 WebKit Plug-in… Sunday, August 26,
Demo • Sample Code:https://github.com/zonble/ NativeDrag • 參考⽂文件:WebKit DOM Programming Topics
- Using Drag and Drop From JavaScript Sunday, August 26,
WebView 與 NSTableView 交換資料 Sunday, August 26,
怎麼做 • 先解釋怎樣從 WebView 拖資料放到 NSTableView • 再解釋怎樣從 NSTableView 拖資料到
WebView Sunday, August 26,
從 WebView 拖資料放 到 NSTableView Sunday, August 26,
JavaScript • 要讓⼀一個 HTML Element 變成可以⽤用 Native Drag 拖拉 •
加上 CSS 屬性:-webkit-user-drag: element; • 加上 ondragstart 的 handler • <div style=”-webkit-user-drag: element;” ondragstart=”dragstart(this, event)”></ div> Sunday, August 26,
JavaScript 呼叫系統剪貼簿 dragstart = function(this, event) { var dataTransfer =
event.dataTransfer; dataTransfer.setData(“key”, “value string”); return true; }; Sunday, August 26,
Objective C • 註冊可以 Drop 的 Data Type • [self.tableView
registerForDraggedTypes:@[@”key”]]; • NSView 需要實作 NSDraggingDestination 才能⽀支援 Drop 資料 • NSTableView DataSource 需要實作兩個 method • tableView:validateDrop:proposedRow:proposedDropOperation: • tableView:acceptDrop:row:dropOperation: Sunday, August 26,
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; } Sunday, August 26,
setData() • JavaScript 會透過 dataTransfer 物件的 setData() 與 getData() 交換資料
• …但是裡頭的資料⺫⽬目前只能夠是字串, 如果是 array 等物件,會變成 [object Object] 這類字串 • 所以如果是複雜的資料,我們可以⼀一次 ⽤用上很多個 Pasteboard key 設定 • …其實很醜 Sunday, August 26,
setData() • 既然只能⽤用字串… • 把 JavaScript 物件透過 JSON.stringify() 與 JSON.parse()
轉成字串 • Objective C 可以⽤用 NSJSONSerialization 或是其他第三⽅方 JSON Parser • Binary 資料?Base64 吧… Sunday, August 26,
查看全部剪貼簿內容? Pasteboard Peeker 蘋果雖然說 Deprecated,但是還是很好⽤用 Sunday, August 26,
從 NSTableView 拖資 料放到 WebView Sunday, August 26,
Objective C • NSView 只要實作⼀一個 method 就可以開 始 Drag 東⻄西出來
• dragImage:at:offset:event:pasteboard:sour ce:slideBack: • NSTableView DataSource 則是要實作 tableView:writeRowsWithIndexes:toPasteb oard: Sunday, August 26,
Objective C - (BOOL)tableView:(NSTableView *)tableView writeRowsWithIndexes:(NSIndexSet *)rowIndexes toPasteboard:(NSPasteboard *)pboard {
[pboard declareTypes:@[@”key”]; [pboard setString:@"Value String" forType:@”key”]; return YES; } Sunday, August 26,
JavaScript • 要讓⼀一個 HTML Element 變成可以接受 Drop • 加上 CSS
屬性:-webkit-user-drop: element; • 加上 ondragenter、ondragover、ondrop 等 handler Sunday, August 26,
JavaScript • ⽂文件上⾯面說 ondragenter 與 ondragover 裡 頭,⼀一定要呼叫 event.preventDefault(); 不然沒有作⽤用
• 我們可以從 dataTransfer.getData() 拿到 NSTableView 拖過來的資料 Sunday, August 26,
Das ist alles. Sunday, August 26,