[html5-developers-jp:957] iphone上でのドラッグ & ドロップについて

tabran

unread,

May 21, 2010, 11:55:38 PM5/21/10

to html5-developers-jp

皆様

初めて投稿させていただきます、田淵と申します。

スマートフォン上でのWebアプリ by HTML5 で何ができるのだろうと、
白石さんの本をやり始めたところです。
基本的な質問で申し訳ありません。

ドラッグ＆ドロップAPIがありますが、
これはiphoneでは利用できないのでしょうか？

ソースは以下で、chrome 4 やFF3.6 では動くのですが、、、。
iphoneでのdragはスクロールしかできないのかもしれないのですが、
もしご存じの方がいればと思い、質問させていただきました。

---------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>
<header>
<meta charset="UTF-8">
</heder>
<section class="content">
<ul id="list1" ondragstart="onDragStart(event)">
<li id="apple1" draggable="true">りんご</li>
<li id="apple1" draggable="true">ぶどう</li>
<li id="orange1" draggable="true">オレンジ</li>
</ul>

<script type="text/javascript">
function onDragStart(event){
if(event.target.tagName.toLowerCase()=="li"){
//Datatransferに格納
event.dataTransfer.setData("text",event.target.id);
}else{
event.preventDefault();
}
}
</script>

<ul id="list1" ondragstart="onDragStart(event)"
ondragenter="onDragEnter(event)" ondragover="onDragOver(event)"
ondrop="onDrop(event)">
<li id="apple1" draggable="true">APPLE</li>
<li id="apple1" draggable="true">GRAPE</li>
<li id="orange1" draggable="true">ORANGE</li>
</ul>

<script type="text/javascript">
function onDrop(event){
var id=event.dataTransfer.getData("text");
var li=document.getElementById(id);
if(li && li.parentNode !=event.currentTarget){
li.parentNode.removeChild(li);
event.currentTarget.appendChild(li);
}
event.stopPropagation();
}

function onDragOver(event){
event.preventDefault();
}

function onDragEnter(event){
var types=event.dataTransfer.types;
for(var i=0;i<types.length;i++){
if(types[i]=="text"){
event.preventDefault();
return;
}
}
}

</script>

</section>
<footer>
</footer>
</body>
</html>
---------------------------------------------------------------
もしご存じで回答いただける親切な方がいれば、
よろしくお願いいたします。

田淵

--
このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja からこのグループにアクセスしてください。

ISHIKAWA Mutsumi

unread,

May 23, 2010, 11:57:14 PM5/23/10

to html5-dev...@googlegroups.com

むつみです。

>>>>> In <87e4d7bd-a14f-4a5d...@y18g2000prn.googlegroups.com>

>>>>> tabran <keizo....@gmail.com> wrote:
>> 皆様
>>
>> 初めて投稿させていただきます、田淵と申します。
>>
>> スマートフォン上でのWebアプリ by HTML5 で何ができるのだろうと、
>> 白石さんの本をやり始めたところです。
>> 基本的な質問で申し訳ありません。
>>
>> ドラッグ＆ドロップAPIがありますが、
>> これはiphoneでは利用できないのでしょうか？
>>
>> ソースは以下で、chrome 4 やFF3.6 では動くのですが、、、。
>> iphoneでのdragはスクロールしかできないのかもしれないのですが、
>> もしご存じの方がいればと思い、質問させていただきました。

onDrag* イベントは iPhone だと使えませんね。
onTouch* イベントでハンドリングしてやる必要があると思います。

(以下、これ全部あってるか確認したわけじゃないですが) さくっと
検索した結果だと例えば、このあたりの下とかを参考にするといいんじゃ
ないでしょうか。

http://www.evotech.net/blog/2009/12/web-development-for-the-iphone-html-css-support/

--
いしかわむつみ
<ishi...@hanzubon.jp>, <ishi...@osdn.jp>, <ishi...@debian.org>

tabran

unread,

May 31, 2010, 10:34:36 AM5/31/10

to html5-developers-jp

むつみさん

どうもありがとうございます！

返信遅れて申し訳ありません。
（気づくのが遅れてしまいました。）

そういうことなんですね。ありがとうございます。

リンク先をぜひ今後参考にやっていきたいと思います。

田淵

On 5月24日, 午後12:57, ISHIKAWA Mutsumi <ishik...@hanzubon.jp> wrote:
> むつみです。
>
>
>
> >>>>> In <87e4d7bd-a14f-4a5d-baaa-f1e688e05...@y18g2000prn.googlegroups.com>

> >>>>> tabran <keizo.tabu...@gmail.com> wrote:
> >> 皆様
>
> >> 初めて投稿させていただきます、田淵と申します。
>
> >> スマートフォン上でのWebアプリ by HTML5 で何ができるのだろうと、
> >> 白石さんの本をやり始めたところです。
> >> 基本的な質問で申し訳ありません。
>
> >> ドラッグ＆ドロップAPIがありますが、
> >> これはiphoneでは利用できないのでしょうか？
>
> >> ソースは以下で、chrome 4 やFF3.6 では動くのですが、、、。
> >> iphoneでのdragはスクロールしかできないのかもしれないのですが、
> >> もしご存じの方がいればと思い、質問させていただきました。
>
> onDrag* イベントは iPhone だと使えませんね。
> onTouch* イベントでハンドリングしてやる必要があると思います。
>
> (以下、これ全部あってるか確認したわけじゃないですが) さくっと
> 検索した結果だと例えば、このあたりの下とかを参考にするといいんじゃ
> ないでしょうか。
>

> http://www.evotech.net/blog/2009/12/web-development-for-the-iphone-ht...
>
> --
> いしかわむつみ
> <ishik...@hanzubon.jp>, <ishik...@osdn.jp>, <ishik...@debian.org>

Reply all

Reply to author

Forward