マウスでなにかしら移動させたかったその２

TableのTDも移動させることができるようなので
それに画像を貼り付けて移動させることをHTAでやってみた。

今回はonmouseoutのイベントを削除したらマウスの張り付きが良くなった。
だもんで前回のも削除すればいいと思いやってみたけど、あっちは挙動がおかしくなる。
動かす対象によって違うみたいだ、わからんのぉ。

↓HTAのソース。
ボタンを押すとフォルダ選択のダイアログが出て
画像が入っているフォルダを選択すると、横100pxに縮小された画像が並ぶ。
マウスのドラッグで移動、ダブルクリックで元の大きさ⇔縮小。
<html> <head> <title>Image-View</title> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <hta:application id = "image_view" border = "thick" innerborder = "no" contextmenu = "no" scrollflat = "yes" /> <style type="text/css"> body { margin : 10px; background: #333; overflow : auto; } img { width : 100px; height : auto; margin : 10px; border : none; zoom : 1; cursor : move; } button { background: #222; color : #fff; border : 3px outset #fff; font-size : 90%; margin : 0 5px; cursor : pointer; } </style> <script type="text/javascript"> var _z_index = 1; window.onload = function() { var param = image_view.commandLine.split(/\s*"/); if (param[1]) { var arr_f = chkFile(param[1]); if (arr_f) appendImg($('img-body'), arr_f); } $('img-open').onclick = openFile; $('img-reload').onclick = function() {openFile(document.title)}; }; function openFile() { var res; if (!arguments[0]) { var app = new ActiveXObject('shell.application'); var bff = app.browseforfolder(0, 'ディレクトリを選択', '&h1', 5); if (bff) { app = null; res = chkFile(bff.items().item().path); } } else { res = chkFile(arguments[0]); } if (res) appendImg($('img-body'), res); }; function chkFile(dir_path) { var arr_pic = []; var fso = new ActiveXObject('scripting.filesystemobject'); if (!fso.folderexists(dir_path)) return; var co_files = fso.getfolder(dir_path).files; for (var er = new Enumerator(co_files); !er.atEnd(); er.moveNext()) { if (/\.(jpg|jpeg|gif|png|bmp|ico)$/i.test(er.item().name)) arr_pic.push(er.item().path); } fso = null; return (arr_pic.length ? arr_pic : null); }; function appendImg(elm, arr_path) { var frg = document.createDocumentFragment(), elm_img; _z_index = 1; document.styleSheets[0].addRule('img', 'position: static !important'); for (var ss in arr_path) { elm_img = document.createElement('img'); elm_img.alt = arr_path[ss].replace(/.*\\(.*?)/, '$1'); elm_img.src = arr_path[ss]; moveWindow(elm_img); chgSize(elm_img, 100); wheelZoom(elm_img); frg.appendChild(elm_img); } $('img-table').innerHTML = ''; $('img-table').appendChild(frg); var o_img = document.images; for (var p = 0; p < o_img.length; p ++) { o_img[p].style.top = o_img[p].offsetTop; o_img[p].style.left = o_img[p].offsetLeft; } document.styleSheets[0].addRule('img', 'position: absolute !important'); document.title = arr_path[0].replace(/(.*)\\.*/, '$1'); }; function chgSize(elm, min_size) { elm.ondblclick = function() { var ws = elm.style.width || min_size; var wz = elm.style.zoom || 1; if (parseInt(ws) == min_size && wz == 1) { elm.style.width = 'auto'; } else { elm.style.width = min_size; elm.style.zoom = '1'; } }; }; function wheelZoom(elm) { elm.onmouseover = function() { elm.onmousewheel = function() { event.returnValue = false; var up_num = 1.02; var down_num = 0.98; if (event.button == 2) { up_num = 1.5; down_num = 0.669; } var z = elm.style.zoom || 1; if (event.wheelDelta > 0) { elm.style.zoom = z * up_num; } else if (event.wheelDelta < 0) { elm.style.zoom = z * down_num; } }; }; }; function moveWindow(elm) { var _detach = function() { var __detach = function() { this.onmouseup = null; this.onmousemove = null; }; elm.onmouseup = __detach; }; elm.onmousedown = function() { if (event.button == 1) { this.style.zIndex = _z_index ++; var mx = parseFloat(event.x); var my = parseFloat(event.y); var wx = this.style.left || 0; var wy = this.style.top || 0; var df_x = mx - parseFloat(wx); var df_y = my - parseFloat(wy); _detach(); this.onmousemove = function() { event.returnValue = false; var act_x = parseFloat(event.x); var act_y = parseFloat(event.y); this.style.left = act_x - df_x; this.style.top = act_y - df_y; _detach(); }; } }; }; function $(id) {return document.getElementById(id)}; </script> </head> <body> <button id=img-open accesskey=o>OPEN (<u>O</u>)</button> <button id=img-reload accesskey=r>RELOAD (<u>R</u>)</button> <div id=img-table></div> </body> </html>
まぁ、配布されている大抵の画像ソフトの方が遥かに高機能で使いやすいｗ
これは勉強兼ね、遊び。

追記
ホイールでズームも加えた。
右クリックメニューを消した。
他からコードをコピペした際に余計なコードを消し忘れたｗ
08/10/19 更新

マウスを重ねるとファイル名を表示するように変更。
ホイールでのサイズ変更後のダブルクリックは縮小サイズに。

08/10/19 再度更新

タイトルバーに開いているフォルダのパスを表示するようにした。
パラメーターにフォルダのパスを渡すと、起動時にその中の画像を表示するようにした。
だいなファイラーなどにこのHTAを登録すると便利とまでは言い難いけどなかなか面白いｗ
reloadボタン追加。

08/10/19 再々更新

ファイル名をALTで表示するように変更。

08/10/20 更新

imgタグだけでいけたので、間隔も画像に合わせることができるようになった。
右クリック＋ホイール回転で倍率を変えて拡大縮小。
余計だったイベントを削除。