-webkit-user-dragを使うと、Webkit系ブラウザでHTML5のドラッグ＆ドロップが可能に

[白石俊平]

白石です。

HTML5のドラッグ＆ドロップを試してみたのですが、
1. ドラッグ対象の要素にdraggable=trueを付与する
2. dragenter, dragover, dropと言ったイベントを処理する
と言う実装を行っても、Firefoxでは動作するのですがSafari/Chromeでは動作しません。

これは困った・・・と思っていたのですが、海外の人が作ったサンプルを眺めていると、Safariでもドラッグドロップを実現している事を発見。
どうやってるんだ？と思って調べてみると、非標準のCSSプロパティ"-webkit-user-drag"を使用していました。
（参考:http://wiki.sohaya.com/index.php/Safari%E3%81%AECSS3%E6%8B%A1%E5%BC%B5#i2e62f62）

ドラッグ対象の要素にこのスタイルを使用すると、HTML5のドラッグ＆ドロップAPIがSafari/Chromeでも動作しました！
こんなふうに使います。

<div id="dragme" draggable="true" style="-webkit-user-drag: element">
ドラッグしてね
</div>

draggable="true"の要素には無条件でこのスタイルを付与するようなちょっとしたライブラリを作るといいかもしれませんね。
jQueryだったら

$(function() {
$("*[draggable=true]").css("-webkit-user-drag", "element");
})

とか？

以上、小ネタでした。

===
コミュニティ活性化のため、HTML5に関するネタを一日一回何かつぶやいてみます(^^)
しょぼいネタでもご容赦ください。賛同者募集中！
##############################################
白石俊平

Blog:http://d.hatena.ne.jp/Syunpei/
mixi:http://mixi.jp/show_profile.pl?id=3989166
Twitter:Shumpei
（マイミク申請、Twitterフォローはお気軽にどうぞ！）

株式会社あゆた
http://ayuta.co.jp/index.html
##############################################

[TAMURA, Kent]

FYI.

draggable属性はWebKitについ先日実装されました。

http://trac.webkit.org/changeset/45851

2009/7/22 白石俊平 <shumpei....@gmail.com>

--
TAMURA Kent 

[白石俊平]

田村さん

おお、情報ありがとうございます！
では、近々ChromeやSafariでも普通にHTML5のドラッグ＆ドロップが使えるようになるのですね。
楽しみに待ってます。



2009/7/22 TAMURA, Kent <tk...@chromium.org>:

[白石俊平]

田村さん

Webkitのナイトリービルドで試して、-webkit-user-dragなしで動くのを確認しました~
ありがとうございます！


2009/7/23 白石俊平 <shumpei....@gmail.com>: