Jquery. bitmapcutter (image cropping plug-in) works with jquery1.4.2

When the east of the Yangtze river passes, the waves are used as heroes to listen to the song of Uncle su Shan.

I have been asking questions for a long time. No one has helped me solve them. I am depressed, depressed, and helpless. After three days of vacation, the answer count is based on zero.

So today, I decided to solve it myself.

What problems have I encountered?

The problem is: When jquery. bitmapcutter works with jquery1.4.2, the cropping box cannot be moved.

Jquery. bitmapcutter:This is written by a foreigner. It can be used to upload pictures asynchronously, move, rotate, and load and cut pictures. (In my heart, foreigners are really smart. If the development language is Chinese, I am actually very smart ).

To solve the problem, I silently read his js original code several times. So, I ....................................... ................. that's it.

(1) The following code is:Jquery. bitmapcutterIn, load the cropped container DIV, you know, he used to have no id, such as id = "cutterDiv", this is added by myself.

// Cutter
Var $ cutter = $ ('<div id = "cutterDiv" class = "jquery-bitmapcutter-cutter"> & nbsp </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) Let's take a look at the code block bound to the Code event. You canJquery. bitmapcutter.

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.tar get
};
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 );
});
});
}

This is the code mainly used to process the movement of the drag and drop box. (Note the following two lines of code, which I modified)

$ ("# CutterDiv"). unbind ('mousemove ', dragndrop. drag). unbind ('mouseup', dragndrop. drop );

$ ("# CutterDiv"). bind ('mousemove ', {d: data}, dragndrop. drag). bind ('mouseup', dragndrop. drop );

Let's look at the prototype of the two lines of code:

$ (). Unbind ('mousemove ', dragndrop. drag). unbind ('mouseup', dragndrop. drop );

$ (). Bind ('mousemove ', {d: data}, dragndrop. drag). bind ('mouseup', dragndrop. drop );

Yes, their difference is that I use the element id to lock the div, and the former is useless.

Is the author wrong? Of course not, because in jquery1.4.2 and jquery1.3.1, the element selector has changed from 1.3.1 to 1.4.2. This is the reason! Easy! The author is still very good at writing JavaScript code. Like one.

Conclusion: first, add an id to the container in the cropping box, and then in the event binding, change the selection method of the element to select by id. Do you understand?

Here:

Now, let's write it here. Thank you for watching it.

I am bailing.

 

Bailing Note: copyright of this Article Bailing and the blog Park are both owned by each other. For more information, see the source.
Helping others is the same as self-help! Mbailing@163.com