Draggable と InplaceEditorを組み合わせる

Scriptaculous の Draggable は要素をドラッグ可能にし、InplaceEditorは要素をクリックして編集できるようにするわけですが、この二つを組み合わせられないか試してみました。どちらかをシングルクリックではなくダブルクリックにすればいいんだけど、めんどくさがりなんで。

まず、何もせずに Draggableと InplaceEditorを組み合わせてみるとどうなるでしょうか。

hoge

このままでもドラッグできるし、編集もできます。問題なのはドラッグしてドロップしたときです。ドロップすると、要素が編集フォームに切り替わってしまいます。切り替わるのはドラッグせずにシングルクリックしたときだけにしたいのです。

そのためには、Scriptaculous の conrols.jsファイル、Ajax.InPlaceEditor.enterEditMode() を以下のように拡張します。enterEditMode() は InPaceEditor が編集モードに入るときに呼ばれるメソッドです。

  enterEditMode: function(evt) {

    if (this.saving) return;

    if (this.editing) return;
    if (this.shouldCancelEditMode) {       //追加

      this.shouldCancelEditMode = false;   //追加

      return;                              //追加

    }                                      //追加

　　・

　　・

　　・

さらに、上記のHTMLを以下のように修正します。

hoge

(3) は、後で参照しやすいよう、要素に InPlaceEditorオブジェクトを保持させます。(4) でドラッグ開始時に InplaceEditor の働きをキャンセルさせる cancel_ipe を呼び出すようにします。
こうして要素をドラッグすると、ドラッグした要素をパラメータとして(1)の cancel_ipe が呼ばれます。(2) は(3)で要素に保持させた ipe を参照し、shouldCancelEditMode を trueにします。
そして要素をドロップすると、InPlaceEditor オブジェクトの enterEditMode が呼ばれ、通常は編集モードに入りますが、上述のようにenterEditMode を拡張しているため、ドロップしても編集モードに切り替わらなくなります。

※動作確認は Firefox 1.5で行いました。