by kirupa | 26 April 2018 Have questions? Discuss this HTML5 / JavaScript tutorial with others on the forums. This is a companion discussion topic for the original entry at http://www.kirupa.com/html5/drag.htm

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 elem…

Welcome to the forums @Manjunath_R :partying_face: 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? :slight_smile:

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

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 reu…

@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://draggab…

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.

Create a Draggable Element in JavaScript

programming

Topic		Replies	Views
Ah , finally getting somewhere .	11	767	January 29, 2023
How to Drag-Drop Multiple Elements with .PNGs vs .SVGs ?	4	526	January 10, 2023
Why is this .js SO-SLOW and Finicky ? programming	5	445	January 20, 2023
Still need Help with Drop: SOLVED by PAEz ! programming	1	459	January 30, 2023
When draggable=“false” & draggable=“true” don’t work? programming	1	1530	January 17, 2023

Create a Draggable Element in JavaScript

Follow:

Popular

Loose Ends

Create a Draggable Element in JavaScript

Related topics

Follow:

Popular

Loose Ends