Ricoを利用したドラッグによる移動

投稿者: | 2006年5月24日

Ricoを利用してアイテムをドラッグで移動できるようにしてみた。
設定はとても簡単に終わったのだが、動きが上手くいかない。
ドロップすると、元の位置に戻ってしまうのだ。なぜだぁ!
Rico.jsの該当行を見てみると以下のような記述が・・・

if ( this._placeDraggableInDropZone(e) )
  this._completeDropOperation(e);
else {
  this._terminateEvent(e);
  new Effect.Position( this.dragElement,
    this.origPos.x,
    this.origPos.y,
    200,
    20,
    { complete : this._doCancelDragProcessing.bind(this) } );
}

どうも、ドロップ先が無い場合は、元の位置(this.origPos.x , this.origPos.y)に戻しているようだ。
どんな処理をしているのか、よく理解していないのだが、
とりあえず、以下のように変更した。
    this.origPos.x, → e.screenX - this.startx,
    this.origPos.y, → e.screenY - this.starty,
あと、

  new Effect.Position( this.dragElement,

でもエラーが出ていたので、

  new Rico.Effect.Position( this.dragElement,

と変更した。
他にも、スクロールした時にドラッグ位置がズレてしまう状況が・・・


どうも、スクロール量の補正が上手くいっていない様子。
ということで、2860行目付近の処理を修正。

if ( accountForDocScroll ) {
 x -= this.docScrollLeft();
 y -= this.docScrollTop();
}

という処理を、

if ( !accountForDocScroll ) {
 x += this.docScrollLeft();
 y += this.docScrollTop();
}

に変更したら、正常にドラッグすることができた。
一応、IE と、FireFoxでの動作は正常だった。
とりあえずは動作するようになったが、このままでは、ドロップ先を指定した処理が上手く動作しないと思われる。
まぁ、後で見直すか。

カテゴリー: Ajax