I'm trying to make it so I can click a button and then drag an image in a new div. I've tried using a standard button but if you click and hold it down (to drag), it doesn't activate the button till the mouse is released on the button. I then tried to use the draggable event which partially works but then it moves the faded image rather than letting me make my own. Is there any way to have an event for a click that activates as soon as I press my mouse?
#Run function on click
signal python
near summit
Add an event listener for "mousedown" instead of "click".
But your description seems very strange. Are you trying to drag the button? Is clicking the button done to inform the app that you are going to drag an image?
signal python
correct, I don't want to drag the original since I'll be using it multiple times
near summit
I still don't understand. Does the button have an image in it that you want to drag to make multiple copies in different places?
signal python
the image is the button yes
near summit
In that case, don't use a button at all. Just use an image that has an event listener for mousedown. You will also need a separate event listener for mousemove and mouseup.
signal python
gotcha gotcha
that works, thanks
let me play around with the mouse move and putting an image on cursor. Hopefully I can figure that out hah
thanks again though, I had tried onclick, just was missing the right one
near summit
let me play around with the mouse move and putting an image on cursor. Hopefull...
Note that the mousedown should be for the image, but mousemove has to be for the container in which the allowed movement occurs.
signal python
so I'll have to make the new div in the function of the mousedownfunction
and then have mousemove in that some way
near summit
so I'll have to make the new div in the function of the mousedownfunction
No. The container should already exist. It should not be a new div created when the mouse button is pressed. I was referring to the empty space encompassing the original image and its final destination. There should already exist such a container even before the user interacts with the mouse.
signal python
hmm
it's a puzzle sovler
which will have up to 12 pictures of each type
but could only require 3
and there's 6 pieces
don't really want to make 72 divs lol
near summit
None of that is relevant to what I just said. There should be a container that encompasses the entire space that will hold all of this. That container is the one that gets the event listener for mousemove, because the pointer will be moving within this space.
signal python
oh, gotcha, the background image container
so put an id on that then
and then tie the mouse move to that id or such
so just have the div have onmousemove with an if statement for a variable that if true will move said image with event.clientX / event.clientY
near summit
so just have the div have onmousemove with an if statement for a variable that i...
Almost. You might want some math on clientX and clientY, because it would be weird for the top left corner of the image to be at the location of the pointer. Typically, it would be either the middle of the image or the point on the image where the original mousedown happened.