Moving image

Question

Is there any way i can move the given code image, when i took my finger anywhere

https://sololearn.com/compiler-playground/Wfcg4f0pz70A/?ref=app

Answer 1

Pablo🚀 here is a working draggable... i use draggables in other codes like my chess game.

https://sololearn.com/compiler-playground/Wdl9bx33d8DB/?ref=app
https://sololearn.com/compiler-playground/W8Cgtsj4ZA1k/?ref=app
https://sololearn.com/compiler-playground/W2RiuYsGYPl4/?ref=app

Answer 2

https://sololearn.com/compiler-playground/WHqIiql7p74v/?ref=app

Answer 3

Pablo🚀 , what you can do is trigger an animation on hover that creates a moving effect, albeit along a predefined path.

Here's one approach:

https://sololearn.com/compiler-playground/WwUFdwhCdj01/?ref=app

Answer 4

Hello, Diligent Dceasso! Welcome to Sololearn!
Sololearn is a SELF-LEARNING platform which offers several courses.

Consider availing the C++ courses provided here:
https://www.sololearn.com/learn/courses/c-plus-plus-introduction
(Introduction)
https://www.sololearn.com/learn/courses/c-plus-plus-intermediate
(Intermediate)

However, if you have any question, face any probelm while coding, have a confusion or don't understand, feel free to reach out to the Sololearn community. Feel free to post appropriate questions in the Q&A Discussions forum to get constructive help from others.You may also get helpful feedback and suggestions for enhancements on the the codes you publicly post here.

Consider refering to other resources available on the internet, such as:
https://www.w3schools.com/cpp/
https://www.geeksforgeeks.org/cpp/c-plus-plus/
https://www.codecademy.com/learn/learn-c-plus-plus
https://www.learncpp.com/
https://learn.microsoft.com/en-us/cpp/cpp/?view=msvc-170

Thank you for reaching out. Keep coding!

Answer 5

draggable = true doesn't always work from browser to browser

Answer 6

BroFar okay

Answer 7

Okay, look:
...
<img id="albert">
...
// js code
let img = document.getElementById("albert");
img.style.position = "absolute";
img.style.top = 2 + "px"; // or any
img.style.left = 58 + "px";

Answer 8

not working vro Elnior Loreh

Answer 9

Pablo🚀 , CSS cannot read the mouse or finger position in real-time. Therefore, it cannot track the mouse or finger position dynamically rather, it can only respond to predefined interactions, like :hover, :focus, etc. or CSS animations.
You cannot make an image follow a finger or cursor anywhere on the screen using only CSS. To move an element dynamically following a touch, JavaScript is required.

Answer 10

use javascript

Answer 11

idk much js that why i ask Elnior Loreh

Answer 12

You can use JavaScript for create a moving function and CSS for set img position. The move function will move your image.

Answer 13

https://sololearn.com/compiler-playground/WLZ220qtjyC4/?ref=app

Answer 14

Pablo checkout

Answer 15

Please teach me C++

Answer 16

BroFar why did you set draggable=“false”? Is that to override the default behavior? If so why?

Answer 17

Zvi

When a developer wants to implement their own custom drag-and-drop behavior using JavaScript, they'll often set draggable="false" on the default elements to prevent conflicts with the browser's built-in behavior. This gives them full control over how the dragging and dropping works.

Answer 18

https://sololearn.com/compiler-playground/WBpBCezsGZDD/?ref=app

this will work , tap and move

Answer 19

BroFar i thought so but can you be more specific about why you would want to reinvent a wheel when there is a built attribute for this. In other words what builtin behavior do you want to override and fix.

Answer 20

tranquillite , you code works perfectly fine for clicks or touches.
Consider adding draggability to the element.