CodeZine(コードジン)

特集ページ一覧

Yahoo! UI Library3(YUI3)の動きを受け持つモジュール

Yahoo! UI Library Ver.3 を使ってみよう(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

ドラッグ&ドロップ処理

 サイトに動きを追加するのには、マウスの操作はかかせません。マウスのドラッグ&ドロップ処理はモジュールが複数に分かれています。

 どのようなモジュールがあるか見ていきましょう。

モジュールの一覧表

 モジュールを一覧表で示します。

ドラッグ&ドロップ処理のモジュール一覧表
モジュール 概要
dd-drag ドラッグ処理をサポート
dd-drop ドロップ処理をサポート
dd-proxy ドラッグ時実態でなく、枠のみ等代理の物を使う処理をサポート
dd-constrain ドラッグできる範囲の処理をサポート

 画像を表示してマウスで動かすことができる例題を考えてみましょう。モジュールdd-dragを使います。例題の実行画面を図2に示します。

図2:ドラッグ処理例題起動時の画面
図2:ドラッグ処理例題起動時の画面

 リスト3を見てください。

[リスト3]ドラッグ処理の書き方(dd-drag.html)
<style>
    #demo {
		  background-image: url(./DDimg.jpg);
		  width:200px;
		  height:200px;
    }
</style>
<script type="text/javascript">
	YUI().use('dd-drag', function(Y) {	//(1)
	    var dd = new Y.DD.Drag({	//(2)
	        node: '#demo'
	    });
	});
</script>

</head>
<body>
画像をDrag&Dropできます<br><br>
<div id='demo'></div><br>
</body>

 (1)でモジュールdd-dragを指定します。(2)はドラッグの指定です。nodeでドラッグしたい画像を指定しています。これで、divで指定した画像をマウスで動かすことができるようになりました。

ドロップの場所を特定する例題

 ドラッグがあれば、ドロップがあります。ドロップ場所を特定する例題を考えてみましょう。ドロップ場所を決めおいて、指定場所にドロップされたら、文字を出します。指定場所から外れたら、文字を消します。以下が起動時の画面です。

図3:ドロップ処理例題起動時の画面
図3:ドロップ処理例題起動時の画面

 左上の画像を下にある四角の枠にドラッグしてドロップします。リスト4を見てください。

[リスト4]ドロップ処理の書き方(dd-drop.html)
<style>
    #canvas{
    	background-color:#8DD5E7;
    	width:500;
    	height:120;
    }
    #demo {
	border:1px solid black;
	width:80px;
	height:80px;
    }
</style>
<script type="text/javascript">
	YUI().use('dd-drop','dd-drag', function(Y) {
	    var drag = new Y.DD.Drag({	//(1)
	        node: '#demo'
	    });
	    drag.on('drag:start',function(e){	//(2)
	    	Y.one('#comm').set('innerHTML','ドラッグ中です');
	    });
	    drag.on('drag:end',function(e){	//(3)
	    	Y.one('#comm').set('innerHTML','         ');
	    });

	    var drop = new Y.DD.Drop({	//(4)
	        node: '#canvas'
	    });
	    drop.on('drop:hit',function(e){	//(5)
	    	Y.one('#canvas').set('innerHTML','ドロップされました');
	    });
	    drop.on('drop:exit',function(e){	//(6)
	    	Y.one('#canvas').set('innerHTML','         ');
	    });
	});
</script>

</head>
<body>
<div id='comm'>下の画像をドラッグしてください</div><br>
<div id='demo'><img src='./DDimg.jpg' width='80px' height='80px'></div><br><br>
<div id='canvas'></div>
</body>

 モジュールはdd-dropとdd-dragを指定しています。(1)の指定でドラッグを可能にしています。ドラッグが始まると(2)の「drag:start」イベントで、'ドラッグ中です'を表示して、(3)「drag:end」のドラッグ終了イベントで表示文字を消しています。

 (4)では、ドロップされる場所のオブジェクトdropを指定しています。(5)の「drop:hit」イベントでドロップされたとき、'ドロップされました'を表示し、(6)の「drop:exit」のイベントで表示文字を消しています。

ドラッグ&ドロップ用イベント

 例題のようにドラッグやドロップされたかを確認するためにはイベント処理を使用します。イベントは他に以下のものがあります。

ドラッグ&ドロップ用イベント
イベント 概要
drag:mouseDown ドラッグのためのマウスダウン
drag:drag ドラッグ中
drop:enter ドロップ枠に入った
drop:over ドロップ枠上を通過

 イベント処理を使うと面白いサイトができそうです。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Yahoo! UI Library Ver.3 を使ってみよう

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 横塚 利津子(ヨコツカ リツコ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5