Mikel
[转载]jquery.bitmapcutter(图片裁剪插件) 与 jquery1.4.2 配合 – 此地民风淳朴，一心向善 – 博客园.
滚滚长江东逝水，浪花淘尽英雄， 听着苏山大叔的的歌，灵感来了。
在博问中问了许久的问题，一直没有人帮我解决，我郁闷，我压抑，我无奈，在经过三天的假期的等待，回答数依据保持为0。
于是今天来了，下了决定自己解决。
我到底是遇到了什么问题呢？
问题就是：JQuery.bitmapcutter与JQuery1.4.2配合时，发现裁剪框无法移动。
JQuery.bitmapcutter：这个东东就是老外写的一个，可以实现异步上传头像，而且可以移动，旋转，载剪。(说心里话，老外真的是聪明，要是开发语言是中文的话，我其实也很聪明)。
为了解决问题，我默默的读了好些遍他的js原码，于是，于是，我………………………………………………..就这样。
(1)、下面代码是 jQuery.bitmapcutter中，装载裁剪的容器DIV ,要知道，他以前是没有id的，比如id=”cutterDiv” ,这个是我自己加的。
//cutter
var $cutter = $(‘<div id=”cutterDiv” class=”jQuery-bitmapcutter-cutter” > </div>’)
.css(ps.cutterSize)
.css({
‘opacity’: .4,
‘left’: (ps.holderSize.width – ps.cutterSize.width) / 2,
‘top’: (ps.holderSize.height – ps.cutterSize.height) / 2
}).appendTo($holder);
(2)、我们在来看看代码事件绑定的代码块。你可以在jQuery.bitmapcutter 的js文件中找到。
dragndrop: function(setting) {
var ps = $.fn.extend({
limited: {
lw: { min: 0, max: 100 },
th: { min: 0, max: 100 }
},
handler: null,
callback: function(e) { }
}, setting);
var dragndrop = {
drag: function(e) {
var d = e.data.d;
var p = {
left: Math.min(Math.max(e.pageX + d.left, ps.limited.lw.min), ps.limited.lw.max),
top: Math.min(Math.max(e.pageY + d.top, ps.limited.th.min), ps.limited.th.max),
target: d.target
};
ps.callback(p);
},
drop: function(e) {
$(“#cutterDiv”).unbind(‘mousemove’, dragndrop.drag).unbind(‘mouseup’, dragndrop.drop);
}
};
return this.each(function() {
if (ps.handler == null) { ps.handler = $(this) };
var handler = (typeof ps.handler == ‘string’ ? $(ps.handler) : ps.handler);
handler.bind(‘mousedown’, function(e) {
var data = {
target: $(this),
left: $(this).f(‘left’) – e.pageX,
top: $(this).f(‘top’) – e.pageY
};
$(“#cutterDiv”).bind(‘mousemove’, { d: data }, dragndrop.drag).bind(‘mouseup’, dragndrop.drop);
});
});
}
这个就是主要用来处理拖动裁剪框的移动的代码。(注意以下两行代码，这是我改造过的)
$(“#cutterDiv”).unbind(‘mousemove’, dragndrop.drag).unbind(‘mouseup’, dragndrop.drop);
$(“#cutterDiv”).bind(‘mousemove’, { d: data }, dragndrop.drag).bind(‘mouseup’, dragndrop.drop);
来看看上而两行代码的原型：
$().unbind(‘mousemove’, dragndrop.drag).unbind(‘mouseup’, dragndrop.drop);
$().bind(‘mousemove’, { d: data }, dragndrop.drag).bind(‘mouseup’, dragndrop.drop);
是的，他们的区别在于：我用了元素的id来锁定div,而前者没有用。
是作者写错了吗？当然不是，因为jquery1.4.2 和jquery1.3.1 中，元素选择器由1.3.1 – 1.4.2 发展的过程中，发生了变化。这就是原因喽！简单吧！作者还是很厉害的，js写的特别的好。赞一个。
终述一下：首先给裁剪框容器增加id,然后在事件绑定中，将元素的选定方式改为依靠id 来选择，你明白了吗？
来个截图：
好了，就写到这里了，谢谢大家的观赏。
我是百灵。
