Create a Draggable Element in JavaScript

programming
83

Thank you so much, It is lifesaving. but please please please help me.
How can I provide drag and drop with snap into place functionality ?? something like photoshop Snap To functionality

Can you help me again??

84

For that level of functionality, I would suggest you look at the links prg9 has provided: Create a Draggable Element in JavaScript

:slight_smile:

85

Thank you very much :pray: :pray: :pray:

88

Drag not working on mobile it can move outside from container. if we open on browser desktop no problem.

89

Interesting! I will look into it shortly :slight_smile:

90

Hi, Kirupa! How do I make it so you can drag the circles between and around two boxes instead of around just one box? Thank you in advance! :smiley:

91

Can you clarify further? I am not following :grinning:

92

Hi Kirupa,

Nice tutorial. It really helped me alot. But after dragging the divs and then resizing the window, the divs are not on the same positions anymore, as I am trying to get the perfect alignment with its parent div. I tried changing this line

setTranslate = (xPos, yPos, el) => {
el.style.transform = ā€œtranslate3d(ā€ + xPos + "%, " + yPos + ā€œ%, 0)ā€;
};

into percentage. It works as I expected but the thing is as mentioned here dragging and animations are terribly slow and awful with percentage, as it needs to be calculated for its relative position.

Could you think of anyway to solve this? Thank you so much!

93

Do you have an example or live demo? Iā€™d like to see what exactly is happening, for when I resize the example in the tutorial, I am not seeing the position shifts.

94

I have to face the issue of my website {baleeted} the HTML code cannot work properly. Anyone help or guide me which is the best plugin I can you for my site

95

thank you for the response. I have solved my problem by using transform and scale methods. Thanks for this useful tutorial!

1 Like
96

Hi Kirupa, I would like to be able to make a simple game where I can drag an image to the correct image box to make it droppable, any other boxes will not be droppable for that imageā€¦ for example I have three images, orange, strawberry, apple, and three colored boxes, red box (for the strawberry image to be dropped in), orange box (for the orange image to be dropped in) and green box (for the Apple image to be dropped in)ā€¦ is this possible? I have searched high and low but I canā€™t find one that will work on iOS as well as PC. Thanks so much :slight_smile:

(The red, orange, green boxes to be images as well, or or better still, contain letters like ā€œREDā€ ā€œGREENā€ ā€œORANGEā€)

97

That is doable with the code I posted earlier. The main work will be to ensure that the place you are releasing your dragged element on is indeed the right destination. This can be done by either checking if the coordinates intersect or by doing some eventing tricks. Does this help a bit? :grinning:

98

Hi kirupa,

Thank you so much for that amazing code - it even works on a wix site. Is it possible to edit that original code that the circle you are moving is kind of like a flashlight and while moving you are revealing the background picture?

99

hi Kipura, thanksā€¦ the problem is that Iā€™m a newbie and not sure if I have got it right, Iā€™ve tried adjusting your code, but itā€™s not exactly what I needā€¦ could you have a look at what I did in here what it looks like

Here is the code that I put in:
(I donā€™t know how to paste in the code in hereā€¦ Iā€™ll put it up in my website above)

100

Thanks for great work.

101

kirupa. This code works great. I am trying to add a rotate with double click then drag the multiple items on the container. so far I can do one or the other but can not do both. I tried your rotate onclick function above with the drag but the rotate doesnā€™t work with the drag. Can you add rotation to each item on your latest code above?

102

jmacky
I copied the code as is and I can not get the items to rotate. They drag smoothly. Did you modify the code to get the click rotate to work? Thanks in advance.

103

Hi Kirupa,
This tutorial is fantastic! I am learning and it has been great to be able change colors and sizes and see how things work. My question is how can I add more items? .five . six etc.? I tried just writing it in and then adding to the div style, but circles five and 6 never show up when I put the code live. What am I doing wrong? Thanks!

104

Hi @chelsea1 - welcome to the forums! Can you share your example? Did you add the HTML elements as well that map to the .five and .six selectors?