I have an image which i don't want to drag but i want to get that effect.
for example :- I clicked on the image and without leaving the mouse if I moved the mouse over the whole screen. I don't want the image to move but a blur copy of image should move with my mouse.
regards,
Related
I need to paste a small picture in the center of wherever the mouse is clicked. Do I need to locate the mouse position first and then paste the picture there?
Initially I made a image magnifier which will zoom when the user move the mouse over the image but now I want to change that into a lens zooming method should use only one image
Did you mean something like Magnifier.js?
I'm working on a javascript/canvas game, and using mouse position to determine what blocks to dig. Whenever I use the movement controls the mouse disappears though, which is annoying because then I have stop moving and move the mouse to see its position again.
So I'm looking for a way to make the mouse always visible on the canvas, opposite to using CSS cursor: none to make it invisible.
Full project here: https://gist.github.com/TuckerFlynn/0a52278878a888b0f695
The mouse can certainly navigate off-canvas, so...
Hide the mouse when it's over the canvas.
Draw your own "fake cursor" following the current mouse position reported by canvas's mousemove.
If the mouse leaves the canvas, just leave the fake cursor visible as a reminder of the mouse's last canvas position.
Your "fake" canvas cursor doesn't have to look like a mouse. It could even be a simple cross. Or if you really want it to look like a mouse, then move an image of a mouse around the canvas.
I use kineticjs example from this page http://www.html5canvastutorials.com/labs/html5-canvas-animals-on-the-beach-game-with-kineticjs/.
Everything works fine- i can move, drag image (kinetic.image) etc. The problem is when i press cursor on transparent area of image, dragging doesn't work then. What to do to make image draggable irrespective of that i press cursor on drawed region or transparent background of this image?
Try removing lines 121 and 122. The page is loading a script that is not being shown that changes the dragable region to the non-transparent parts. For more info look here
Lines to remove:
animal.cache();
animal.drawHitFromCache();
I'm making a browser game, it's based around a world which you can build on, essentially I have a little user window with a box in, where the world/map is.
Basicly this map is so big so you need to be able to pan it, like click and drag inside the box to move the "map". (The map is essentially a big image)
Now there's a problem with images and dragging. When I click and drag on an image it assumes I want to "copy" it or drag it somewhere.
I tried to replace it with a normal div and it works so the code is fine. And I don't want to place the image as a background image either.
So my question is, how do I "disable" the "drag picture somewhere" feature? Whenever I try to click and drag on a picture, on any website, my cursor changes to a "no" sign, it means that I can't drop it there and if I'd move it into lets say photoshop, it'll change to this "drop pic here" cursor.
EDIT
Sorry for me not researching, I found out that you can do;
[element].ondragstart = function() { return false; };
You could use
[element].ondragstart = function() { return false; };
as you suggested, or I also think you could solve this by absolutely positioning another div on top of the image, just as a "control layer". That way you could write js that responds to mouse interactions in that div without worrying about the image at all.