Hi @kirupa;
I try to develop my little project. It includes the multiple draggable Sortable container. I want to put another element inside the element. How can I do it?
Right now what we are dragging is a div element. You can just add more child elements into it, and that will now be draggable as well. Are you looking to drag another element into another element? At which point two separate elements become one combined element?
Hi @kirupa , it had helped me a lot for dragging an element. Am using the drag to have horizontal page scroll. My only concern now is, as there someone (@Cezary ) had already asked about the draggable element is going beyond it’s parent(container) element. As the parent has overflow: hidden the element looks like cropped in the border. Can you provide a solution to stop that inside the parent element, it will help me a lot.
Welcome to the forums @Manjunath_R 
If I understood your question correctly, you want the draggable element to stop just before hitting the boundaries. In other words, it will never look cropped. Does that sound right? 
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.
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
@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?
Here are a few that come to mind, while many others abound also.
- https://sortablejs.github.io/Sortable/
- https://shopify.github.io/draggable/
- https://haltu.github.io/muuri/
- https://bevacqua.github.io/dragula/
- https://anseki.github.io/plain-draggable/
- https://greensock.com/draggable/
- https://draggabilly.desandro.com/
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
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.
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??
For that level of functionality, I would suggest you look at the links prg9 has provided: Create a Draggable Element in JavaScript
Thank you very much 
Drag not working on mobile it can move outside from container. if we open on browser desktop no problem.
Interesting! I will look into it shortly
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! 
Can you clarify further? I am not following 
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!
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.