Create a Draggable Element in JavaScript

programming
126

Hi kirupa,
I used your script for dragable element in javascript. I see you are speaking of “when you are dragging your element really quickly, your pointer will leave the hit area of the element you are dragging.” In my site when I drag the cursor out of the image it doesnt drag aymore. I think maybe I did something wrong. This is the url: https://jill-portfolio-cms.webflow.io/
I have tried to debug where it goes wrong but can’t seem to figure it out… Thank you in advance!

127

Hi Kirupa! I’m a beginner so this is probably a dumb question, but what code do you use to turn these draggable images into links? I’m stuck.

128

Hi Rebecca - welcome to the forums! There is no such thing as a dumb question :stuck_out_tongue:

Can you clarify which draggable images you are referring to? Do you mean the circular div elements in my example?

Cheers,
Kirupa

130

There are several ways you can do this. The easiest way may be to replace the div elements with actual images. Just be sure to maintain similar class names :grinning:

131

How is it even possible that I’ve found this treasure only in 2021?!?

Thank you @kirupa.

Any advice on how to target a class instead of an #ID? In this way we could have multiple draggable elements in different sections of a page.

Thank you again!

132

Hi @mrprainx! Welcome to the forums :slight_smile:

I posted a version of that here: Create a Draggable Element in JavaScript

:grinning:

133

Thank you Kirupa. That’s great (and I’m already using it :stuck_out_tongue_winking_eye:) for dragging multiple elements inside a container. But what if one have multiple containers? In that case one can’t use that code because #container ID must be unique. Am I right? :thinking:

134

OH! I totally missed that detail about multiple draggable regions. Do you need to drag an item between regions? Or will this item be contained to whatever region it is originally in?

135

I’d say the latter.

To make a standard example: I’ll have a page with two draggable images in a container, then some standard text, then another couple of draggable images inside another container, then some standard text etc.

136

Hi, Thank you! It works great. :smile:

I’m using images for the draggable elements and as you suggested the following CSS (to make it work with images):
.item img {
pointer-events: none;
}

However I’d like to make the images clickable / linking to another webpage.
Hope you can point me in the right direction. Cheers!

137

You want the images to be both draggable and clickable? :grinning:

138

Yes! And I found a way to make the images both draggable and clickable with the following library: https://draggabilly.desandro.com/ It works like a charm :smiley:

2 Likes
140

hi kirupa actually i’m glad to see your tutorial
and it’s really help me a lot. but i have a new work of code that i am looking for.
about a draggable element and once you clicked the specifict div or element. it will set a layer over of all other element that not active to click. what i mean about is a z-index layering on a css ? once the specific target of div is active to clicked it will set it at the top of the layers, and once the mouse drop out the clicked div element, it will remain at the top of the layers.

by the way one thing i noticed is everytime i put or add any element inside of a specific div
they are also draggable. a

tag also the button, they dragged separately. but what my intention is they are not draggable. they are content only of the draggable element.

how i can fix that too?

141

You mean, kinda like the Facebook Messenger bubble? like how it’s only draggable when held then clickable when tapped?

142

this is very cool, well done, thanks! :smile:

144

Thanks for this tutorial, it has been a huge help in a rather complex project i am working on. I’ve now run into a bit of a roadblock. I now want to be able to rotate the element separately, which I can do, but once it’s rotated, the dragging ability isn’t working properly anymore. Do you know of a solution to this?
Also, I’ve had to post this from my phone because my IP is blocked for some reason :pensive:

145

Hi @squeakie! Welcome to the forums. Regarding the banned IP, can you message me the IP that shows up as blocked? You can also e-mail it to me at [email protected] :email:

Regarding the element rotation, what you’ll need to do is wrap the element you are dragging into another div element. The inner div element is what you rotate. The outer div element is the one you drag. This will keep the various rotation and position details separate.

:slight_smile:

146

Hi @kirupa , thanks for the quick reply! It looks like my IP is no longer blocked!
I’ve done what you suggested and wrapped it another div and that really helped. Now the only issue I’m facing is that when the element inside is rotated, the area that you can drag has changed and no longer is aligned with the boundaries of the rotated item. I hope that makes sense. Do you have any ideas on a solution for that?

147

Hi again, never mind my last question, I found a solution. I applied the dragstart event to the element inside, while applying the translate3d values only to the outer element.

1 Like
148

I don’t see the need to set initialX & initialY to currentX & currentY in the dragEnd function. They are overwritten in dragStart anyway.

I would also place xOffset = currentX into the dragEnd function instead of the drag function. No need to overwrite xOffset for every mouse movement. Only needed at the end.

Just some suggestions

1 Like