[筆記] 關於 XUL Tree 對於拖曳移動位置的實做

最近一直在看 XUL 裡面關於 Tree 拖曳的實做。不論哪種 UI framework 裡面的 Tree 都還真的挺複雜的。

以下是自己實做 TreeView 需要 implement 的 method:
http://doxygen.db48x.net/mozilla-full/html/d1/dbc/interfacensITreeView.html

其中 canDrop () 跟 drop () 的參數 orientation 可以拿來判斷現在 drag 的 item 到底是在 target item 的正上方 (DROP_ON), 前面或後面 (DROP_BEFORE/DROP_AFTER)。所以如果你正巧要實做把 item 移動到資料夾,又需要實做 ordering item 時,就可以利用 orientation 來判斷要執行這兩種動作的那一種。

以下的程式就可以拿來印出 drag 的狀況:

\_printDrop: function (aRow, aOrientation) {
    let targetFolder = mytreeview.\_map\[aRow\].\_folder;
    let aDropText = null;
    if (aOrientation == -1) 
        aDropText = "DROP\_BEFORE";
    else if (aOrientation == 0)
        aDropText = "DROP\_ON";
    else
        aDropText = "DROP\_AFTER"
    Application.console.log (aDropText + ": " + targetFolder.name);
  },

讀者回函
讀完本文之後有什麼建議或回饋嗎?請按此在 Twitter 上面分享此文並且提及我,或是透過寄送電子郵件分享你的看法 😎