Using the mouse in jQuery is really easy, and opens up a whole new world for those who use javascript. But, just about everything already has a mouse event attached to it. Images are especially tricky, usually allowing click-and-dragging by default. Today we will go over a useful function that will help you take control over just what the mouse button does on certain elements.
Click and Drag the Image (In a Diagonal Motion, using the top-left and bottom right corners)!
*In IE, Image Size does not update until mouseup.
So, here we have a simple app, that is not the perfect solution, but does rely on jQuery's preventDefault() method. All it does is resize the image based on click and dragging using the top-left and bottom right corners. Its neat, but the main focus here is the prevention of the browser's default "click" action on the image. So, the code our app is as follows:
var x1 = 0;
var y1 = 0;
$('#tImg').mousedown(function(e){
sizeImg = true;
x1 = e.pageX;
y1 = e.pageY;
}).mouseup(function(e){
sizeImg = false;
}).mousemove(function(e){
if (sizeImg == true) {
if (e.pageX > x1 && e.pageY > y1) {
$(this).css({
'width': $(this).width() - 3
});
}
if (e.pageX < x1 && e.pageY < y1) {
$(this).css({
'width': $(this).width() + 3
});
}
}
});
So, in a nutshell, this code takes an image with the ID tImg and resizes it when you click and drag, again only using the top-left and bottom-right corners. It is similar to resizing things on a MS Surface or iPhone, but with a mouse instead. However, there is one issue, most browsers will allow you to drag images to a folder or program directly from the browser itself. So, clicking and dragging on the target image will result in that behavior.
Luckily, jQuery has a special function to handle this. All we have to do is add the preventDefault() function to our mousedown and mouseup events. This prevents the browser's action from taking place, allowing our code to work. So our code should look like this:
var x1 = 0;
var y1 = 0;
$('#tImg').mousedown(function(e){
e.preventDefault();
sizeImg = true;
x1 = e.pageX;
y1 = e.pageY;
}).mouseup(function(e){
e.preventDefault();
sizeImg = false;
}).mousemove(function(e){
e.preventDefault();
if (sizeImg == true) {
if (e.pageX > x1 && e.pageY > y1) {
$(this).css({
'width': $(this).width() - 3
});
}
if (e.pageX < x1 && e.pageY < y1) {
$(this).css({
'width': $(this).width() + 3
});
}
}
});
So just by adding those three lines, which are actually identical, we have stopped the browser from allowing the dragging of the image. The function itself is actually part of the return "event" object that is given to us when the event is fired. The same object provides the niffty mechanism for the mouse coordinates as well.
All this image resizing goodness is only possible when disabling the browser's default behavior on the image. But, as usual, it is easy to do with jQuery. On that note, that rounds up this tutorial. Just remember, when you need coding help, all you have to do is Switch On The Code.
Delicious
