スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



mirrorMan - ドラッグドロップ

ドラッグドロップの機能はjQueryにももちろんあり、divなどのボックス要素をドラッグ中もポインタにぶら下げて描画できるのですが、mirrorManには少し難がありました。ファイル名を持つのはpreタグだし、親のtdタグを箱ごと運ぶのもファイラのUIとしてちょっと変です。また、アイコン画像をひとつひとつレジストリから取得するのはブラウザのレイアウトエンジンをファイラとして使うのに、レスポンス性能以前です。代わりに、IEのプロパティ/メソッドを使用すれば、ポインタ画像も変わってくれるし、操作のレスポンスも許せるレベルです。

この機能のトピックは、フォルダに対してドロップされる以外はどこにドロップされてももう一方のペインにコピーを行うところです。つまり、コピーしたいファイル/フォルダをマウスでピッっとほんの少し飛ばす操作をするだけでコピーをしてしまいます。これは、コーディングの途中に偶然いいぞこれ!と、あまりにも楽なので、実はこれが一番mirrorManでよくやる操作だったりします。

with(document.body){
ondragstart = handleDragStart;
ondragenter = handleDragEnter;
ondragover = setEventRetFalse;
ondrop = handleDrop;
}
それぞれのイベントにハンドル関数を乗っけます。
function setEventRetFalse(){
event.returnValue = false;
}
ドラッグ中のマウスポインタが要素の上に来た時のブラウザのデフォルトの動作をキャンセルさせます。これは動作上(なぜだったか忘れた)、ondragoverイベントにかぶせる必要がありました。
function handleDragStart(){
if(jqContextMenuDsp()) return;
if(/^fNm|^Fol|^zip/.test(event.srcElement.className))
event.dataTransfer.effectAllowed ="move";
}
ユーザがマウスの左ボタンを押したままにしてドラッグが始まった時のイベントハンドラです。
まずプルダウンメニューが表示されている場合をはじいています。
IEの場合、なにか操作が起きるたびにwindowオブジェクトレベルのeventオブジェクトが共通して更新されます。何が起きても社長報告なので、パラメータ、つまり担当レベルの伝言によらずとも社長に聞けばOK的なオブジェクトですね。変な例えですが、リーダーが鬼軍曹的なプロジェクトでそんな案件もありました。MSではそんなことはないと思いますが。閑話。
そのイベントを起こした要素のクラス名がドラッグドロップさせるものであれば、dataTransferのeffectAllowedプロパティに初期値として、何かを移動中であるとして"move"をセットします。
function handleDragEnter(){
if(jqContextMenuDsp()) return;
setEventRetFalse();
if(/^pntFol|^Fol|^zip|^imgFol/.test(event.srcElement.className)){
selItm(event.srcElement,"drag");
event.dataTransfer.dropEffect ="move";
}else{ event.dataTransfer.dropEffect ="copy";}
}
ドラッグ中のアイテムが別の要素オブジェクトの上に来たときのイベントハンドラです。event.returnValueの値は常に更新されているようなので、ここでも明示的にfalseをセットします。
この時点でeventオブジェクトのsrcElementはマウスポインタが上に来た要素オブジェクトになっています。それがドロップ可能のフォルダであれば、マウスポインタが上に来たフォルダが次々にフォーカス表示されていきます。
dropEffectプロパティにも"move"を設定し、対象がフォルダでない場合、つまりファイルの場合はelseでおしなべて"copy"をセットしています。ここがファイルをマウスでピッと飛ばしてコピーするくだんの箇所です。シンプルで便利なお気に入りロジックです。
function handleDrop(){  i
setEventRetFalse();
if(/^pntFol|^Fol|^imgFol|^zip/.test(event.srcElement.className))
var rc = selectedItemToHere("move");
else var rc = selectedItemToHere("copy");
if(!rc) setTimeout("loadItms("+ selItmLR.innerText +")",0);
}
ドラッグ中のユーザがマウスのボタンを離したときのイベントハンドラです。同じく要素のクラス名を検査して、コピーor移動を行うselectedItemToHere()の戻り値ががfalseだった場合に画面を更新しています。
function selectedItemToHere(elm){
…省略
if((selItmObj)&&((src.id =="move")||(elm =="move"))){
var fnm = selItmObj.Name;
var strTyp = selItmObj.IsFolder ? " フォルダ" : " ファイル";
var strCmd ="移動";
var toHereItm = selItmObj;
}else if(document.selection.createRange().text){
var fnm = document.selection.createRange().text;
var toHereItm = ssh.NameSpace(getFol(getAdrBar(iLR))).ParseName(
document.selection.createRange().text);
if(toHereItm) var strTyp = toHereItm.IsFolder ? " フォルダ" : " ファイル";
}
if(!strTyp) return false;
var tgtFol = ssh.NameSpace(getFol(strTgtFol));
if(strCmd =="移動") tgtFol.MoveHere(toHereItm, 64);
else tgtFol.CopyHere(toHereItm, sshCpyOpt);
return setTimeout('loadItms(1)',0);
}
ロジックは見たままです。酒の勢いでここまで書きましたが、あとはもう一杯のむのでそれが抜けたら更新します。要は、最後にMoveHere()かCopyHere()かをしています。
スポンサーサイト



comment

Secret

while(aho.atEndofStream)

笹部 政宏
笹部 政宏
mail




フリーソフツ
Category
はてブ
Monthly Archive
New Entry
New Comment
New Trackback
RSS
Copyright © Kittens flewby me All Rights Reserved.

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。