« スタイル | トップページ | Effect »

2007年3月31日 (土)

ドラッグ＆ドロップ

Dojoのドラッグ＆ドロップ機能を用いるときは、"dojo.dnd.*"をrequireする。 

dojo.require("dojo.dnd.*");

利用するときは、ドラッグ＆ドロップするHTML要素を指定する。HTMLとしての記述は特にない。 ドラッグ対象となるオブジェクト(HTML要素)をHtmlDragSourceとして設定する。 ドラッグしたオブジェクトをドロップする場所を、HtmlDropTargetとして設定する。

ドロップできる場所では、水平の線が現れる。ドラッグしたオブジェクトを、ドロップ対象ではない場所でドロップしたら、ドラッグしたオブジェクトは元の場所に戻る。

HtmlDragSource/HtmlDropTargetの引数として、1つ目にドラッグ対象となるオブジェクト、2つ目にドラッグ/ドロップ対象の範囲を示すコードを指定する。HtmlDragSourceではコードを文字列として１つ、HtmlDropTargetではコードを配列で複数指定できる。

以下の例では、aaa, bbb, cccをドラッグして、ddd, eeeにドロップできる。

     
  • aaa
  • bbb
  • ccc
    • ccc-1
    • ccc-2
  • ddd
  • eee
<html>
  <head>
    <title>Dojo Demos</title>
    <script type='text/javascript' src='dojo.js'></script>
    <script type='text/javascript'>
      dojo.require('dojo.dnd.*');
      
      function init() {
        new dojo.dnd.HtmlDropTarget(dojo.byId('ddd'), ['dest']);
        new dojo.dnd.HtmlDropTarget(dojo.byId('eee'), ['dest']);

        new dojo.dnd.HtmlDragSource(dojo.byId('aaa'), 'dest');      
        new dojo.dnd.HtmlDragSource(dojo.byId('bbb'), 'dest');
        new dojo.dnd.HtmlDragSource(dojo.byId('ccc'), 'dest');
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body>
    <ul>
      <li id='aaa'>aaa</li>
      <li id='bbb'>bbb</li>
      <li id='ccc'>ccc
        <ul>
          <li>ccc-1</li>
          <li>ccc-2</li>
        </ul>
      </li>
    </ul>
    <ul>
      <li id='ddd'>ddd</li>
      <li id='eee'>eee</li>
    </ul>
  </body>
</html>

HtmlDragMoveSourceを使うと、ドラッグ＆ドロップではなく、指定したHTML要素を自由に動かすことができる。 HtmlDragMoveSourceを使うときは、dojo.dnd.HtmlDragMoveをrequireする。コンストラクタの引数にはHTML要素のみを指定する。

以下のfffは自由に動かすことが出来る。

 

  • fff
dojo.require('dojo.dnd.HtmlDragMove');

function init() {
 new dojo.dnd.HtmlDragMoveSource(dojo.byId('fff'));
}
dojo.addOnLoad(init);

setDragHandleでドラッグできる場所を指定できる。disableSelectionでは、ドラッグできない場所を指定できる。 

var drag = new dojo.dnd.HtmlDragSource(dojo.byId('outer1'));
drag.setDragHandle(dojo.byId('inner1'));

dojo.html.disableSelection(dojo.byId('inner1'));

イベント

ドラッグ＆ドロップのイベントを取得する方法として、既存のクラス(dojo.dnd.HtmlDropTargetなど)を継承したクラスを利用する方法と、dojo.event.connectを使う方法とがある。

ドロップ対象において発生するイベントには以下がある。

  • onDrop(e) ドラッグ対象をドロップしたとき
  • onDragOver(e) ドロップ対象の上に、ドラッグ対象が入ったとき
  • onDragOut(e) ドロップ対象の上から、ドラッグ対象が出たとき
  • onDragMove(e) ドラッグ対象の上で、ドラッグ対象を動かしたとき (うまく動きませんできた)
  • onDropStart(e) ドラッグが始まったとき。ドロップ対象の検証をするときに使える
  • onDropEnd(e) ドラッグが終わったとき

各イベントでは、引数としてdojo.dnd.DragEventオブジェクトを受け取る。DragEventオブジェクトは以下のプロパティを持つ。

  • dragObjects: ドラッグしたオブジェクト
  • dragSource: ドラッグ対象のオブジェクト。dragSource.dragObjectはdragObjectと同じ。ドロップ先の情報もパラメータとして持つ。
  • target: ドロップ対象のオブジェクト。まだドロップしてなければnullが返る。

ドラッグ対象のイベントには以下がある。

  • onSelected(e) ドラッグ対象がクリックされたとき
  • onDragStart(e) ドラッグを始めたとき
  • onDragEnd(e) ドラッグが終わったとき。ドロップ対象のイベントonDropの前に呼ばれる。

以下の例では、ドロップ対象の上にドラッグ対象が重なったら、ドロップ対象の色を赤色に変えるようにしている。

  • ggg
  • hhh
  • iii
    • iii-1
    • iii-2
  • jjj
  • kkk
<html>
<head>
  <title>Dojo Demos</title>
  <script type="text/javascript">
    var djConfig = { isDebug: true };
  </script>
  <script type="text/javascript" src="dojo.js"></script>
  <script type="text/javascript">
    dojo.require("dojo.dnd.*");
      
    function init() {
      dojo.declare("dojo.dnd.DestDropTarget",dojo.dnd.HtmlDropTarget,{
        onDragOver: function(e) {
          dojo.debug('dragOver');
          this.domNode.style.color = "red";
          return dojo.dnd.HtmlDropTarget.prototype.onDragOver.apply(this, arguments);
        },
        onDragOut: function(e) {
          dojo.debug('dragOut');
          this.domNode.style.color = "black";
          return dojo.dnd.HtmlDropTarget.prototype.onDragOut.apply(this, arguments);
        }
      });
      
      new dojo.dnd.DestDropTarget(dojo.byId("ddd"), ["dest"]);
      new dojo.dnd.DestDropTarget(dojo.byId("eee"), ["dest"]);

      new dojo.dnd.HtmlDragSource(dojo.byId("aaa"), "dest");      
      new dojo.dnd.HtmlDragSource(dojo.byId("bbb"), "dest");
      new dojo.dnd.HtmlDragSource(dojo.byId("ccc"), "dest");
    }

    dojo.addOnLoad(init);
  </script>
</head>

<body>
  <ul>
    <li id="aaa">aaa</li>
    <li id="bbb">bbb</li>
    <li id="ccc">ccc
      <ul>
        <li>ccc-1</li>
        <li>ccc-2</li>
      </ul>
    </li>
  </ul>
  <ul>
    <li id="ddd">ddd</li>
    <li id="eee">eee</li>
  </ul>

 </body>
</html>

以下の例では、xxx, yyy, zzzをドラッグして、入力フォームに値を設定できる。  

  • xxx
  • yyy
  • zzz

<html>
<head>
  <title>Dojo Demos</title>
  <script type="text/javascript" src="dojo.js"></script>
  <script type="text/javascript">
    dojo.require("dojo.dnd.*");
     
    function init4() {
      dojo.declare("dojo.dnd.DestDropTarget",dojo.dnd.HtmlDropTarget,{
        onDragOver: function(e) {
          dojo.byId('text').value = e.dragObjects[0].domNode.innerHTML;
        }
      });
      
      new dojo.dnd.DestDropTarget(dojo.byId("text"), ["dest"]);

      new dojo.dnd.HtmlDragSource(dojo.byId("xxx"), "dest");      
      new dojo.dnd.HtmlDragSource(dojo.byId("yyy"), "dest");
      new dojo.dnd.HtmlDragSource(dojo.byId("zzz"), "dest");
    }

    dojo.addOnLoad(init4);
  </script>
</head>

<body>
<ul>
<li id="xxx">xxx</li>
<li id="yyy">yyy</li>
<li id="zzz">zzz</li>
</ul>

<input id="text" type="text">

 </body>
</html>

2007年3月31日 (土) Dojo |

« スタイル | トップページ | Effect »

コメント

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です： ドラッグ＆ドロップ:

« スタイル | トップページ | Effect »