Create a Draggable Element in JavaScript

programming
76

Exactly @kirupa!!. Glad to see your response so soon.

77

A post was split to a new topic: Dragging items between lists

78

I don’t have a solution ready to share, but this is something I will fiddle with over the next week or so. The main work revolves around first identifying the boundaries of the container, boundaries of the element being dragged, and checking for overlaps to block the drag when an overlap is detected.

79

There exist various vanilla drag and drop libraries with robust feature sets. So I wonder at what point regarding features does reinventing the wheel from scratch start to come into question? I appreciate the learning aspect, but when features start getting overly robust then sometimes efficient reusable libraries can become beneficial.

1 Like
80

@prg9 - That is actually a good point. Drag/drop functionality is something best done by a 3rd party library that handles all the edge cases. Do you have a good one that you’d recommend?

81

Here are a few that come to mind, while many others abound also.

Most of these are pretty vanilla yet very extensible further with user logic as desired. Some are similar while others have specific features which make them unique. I would say a few of these are quite relative to questions that have been asked regarding drag and drop from your tutorials. All of which would be a worthwhile review for consideration by users seeking drag and drop capabilities, some may prove useful to someone.

1 Like
82

Thanks! I will be revising this tutorial shortly, so I will revise some of the basic drag explanations (for science, of course :P) and then point to your list for drag/drop next steps.

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: