jqueryのjqDnRを使えばHTML要素を簡単にドラッグ＆リサイズできます。
しかし、現在のバージョンr2ではドラッグやリサイズに関するイベントハンドラを記述できません。公式サイトではバージョンr3またはr4で対応するようにする予定となっているので、すぐには対応してもらえそうもありません。
ソースコードもあることだし改造するかということでやってみた。
jqDragとjqResizeの引数を１つ増やして、その引数で与えられたコールバック関数をドラッグとリサイズのイベント処理の最後で呼び出すようにした。具体的には次のように書けばイベントハンドラを記述できます。適当な関数(ここではmyHandler)を書いて、jqResizeの第2引数に与えるだけです。
<script type="text/javascript">
function myHandler() {
// ここにイベント処理を書く
}
$().ready(function() {$('#ex1').jqResize('.jqResize', myHandler); });
</script>
<style>
.jqHandle {background: red; height:15px;}
.jqDrag {width: 100%; cursor: move;}
.jqResize {width: 15px; position: absolute; bottom: 0; right: 0; cursor: se-resize;}
.jqDnR {z-index: 3; position: relative; width: 180px; font-size: 0.77em; color: #618d5e; margin: 5px 10px 10px 10px; padding: 8px; background-color: #EEE; border: 1px solid #CCC;}
</style>
<p id="ex1" class="jqDnR">I am an example Box "#ex1"
You can *RESIZE* Me.
</p>どんな改造をしたかみたい人はがんばって比較してください。もともとのコードがものすごく気持ち悪い書き方になっていて読みにくいですね。
変更前のjqDnR.js
/* * jqDnR - Minimalistic Drag'n'Resize for jQuery. * * Copyright (c) 2007 Brice Burgess <bhb@iceburg.net></bhb@iceburg.net>, http://www.iceburg.net * Licensed under the MIT License: * http://www.opensource.org/licenses/mit-license.php * * $Version: 2007.08.19 +r2 */ (function($){ $.fn.jqDrag=function(h){return i(this,h,'d');}; $.fn.jqResize=function(h){return i(this,h,'r');}; $.jqDnR={dnr:{},e:0, drag:function(v){ if(M.k == 'd')E.css({left:M.X+v.pageX-M.pX,top:M.Y+v.pageY-M.pY}); else E.css({width:Math.max(v.pageX-M.pX+M.W,0),height:Math.max(v.pageY-M.pY+M.H,0)}); return false;}, stop:function(){E.css('opacity',M.o);$().unbind('mousemove',J.drag).unbind('mouseup',J.stop);} }; var J=$.jqDnR,M=J.dnr,E=J.e, i=function(e,h,k){return e.each(function(){h=(h)?$(h,e):e; h.bind('mousedown',{e:e,k:k},function(v){var d=v.data,p={};E=d.e; // attempt utilization of dimensions plugin to fix IE issues if(E.css('position') != 'relative'){try{E.position(p);}catch(e){}} M={X:p.left||f('left')||0,Y:p.top||f('top')||0,W:f('width')||E[0].scrollWidth||0,H:f('height')||E[0].scrollHeight||0,pX:v.pageX,pY:v.pageY,k:d.k,o:E.css('opacity')}; E.css({opacity:1});$().mousemove($.jqDnR.drag).mouseup($.jqDnR.stop); return false; }); });}, f=function(k){return parseInt(E.css(k))||false;}; })(jQuery);
変更後のjqDnR.js
/* * jqDnR - Minimalistic Drag'n'Resize for jQuery. * * Copyright (c) 2007 Brice Burgess <bhb@iceburg.net></bhb@iceburg.net>, http://www.iceburg.net * Licensed under the MIT License: * http://www.opensource.org/licenses/mit-license.php * * $Version: 2007.08.19 +r2 */ (function($){ $.fn.jqDrag=function(h,s){return i(this,h,'d',s);}; $.fn.jqResize=function(h,s){return i(this,h,'r',s);}; $.jqDnR={dnr:{},e:0, drag:function(v){ if(M.k == 'd')E.css({left:M.X+v.pageX-M.pX,top:M.Y+v.pageY-M.pY}); else E.css({width:Math.max(v.pageX-M.pX+M.W,0),height:Math.max(v.pageY-M.pY+M.H,0)}); if(M.s){M.s();} return false;}, stop:function(){E.css('opacity',M.o);$().unbind('mousemove',J.drag).unbind('mouseup',J.stop);} }; var J=$.jqDnR,M=J.dnr,E=J.e, i=function(e,h,k,s){return e.each(function(){h=(h)?$(h,e):e; h.bind('mousedown',{e:e,k:k},function(v){var d=v.data,p={};E=d.e; // attempt utilization of dimensions plugin to fix IE issues if(E.css('position') != 'relative'){try{E.position(p);}catch(e){}} M={X:p.left||f('left')||0,Y:p.top||f('top')||0,W:f('width')||E[0].scrollWidth||0,H:f('height')||E[0].scrollHeight||0,pX:v.pageX,pY:v.pageY,k:d.k,o:E.css('opacity'),s:s}; E.css({opacity:1});$().mousemove($.jqDnR.drag).mouseup($.jqDnR.stop); return false; }); });}, f=function(k){return parseInt(E.css(k))||false;}; })(jQuery);
ｊQuery-1.3.2ではうまく機能しますが、1.4.1では動作しません。改造前のオリジナルも同様でした。
なんとかなりませんでしょうか？
a