Draggable Div Element in HTML CSS & JavaScript
ฝัง
- เผยแพร่เมื่อ 3 ต.ค. 2024
- Draggable Div Element in HTML CSS & JavaScript
In this video, I have shown you to create a Draggable Div Element in HTML CSS & JavaScript. You can move this div element anywhere on the document or page.
Live Demo or Download Codes of this Draggable Div - codingnepalweb...
My Code Editor - • Best Text Editor for H...
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Ikson - Last Summer [Official]
• #37 Last Summer (Offic...
Track: Ehrling - You And Me (Vlog No Copyright Music)
• Ehrling - You And Me (...
Track: Jimmy Hardwind - Want Me (feat. Mike Archangelo)
• Jimmy Hardwind - Want ...
Live Demo of this Draggable Div - codingnepalweb.com/demos/draggable-div-element-in-javascript/
Not for mobile 😅
Yes, it's not work on mobile devices.
@@CodingNepal Source code please 😂
Wow!!! Amazing, A Draggable Div Element. Thats Great! THANKS SO MUCH CODING NEPAL
My pleasure
Sir really it's awesome thanku sir for chat application my college project is ready, thanku so much for all content on TH-cam 😘
Glad to hear that 😊
Using top and left is to change the element's position is not ideal since it triggers a screen re-write. Instead, you should use transform() as it does not require the browser to re-write the element, it simply applies an aspect transformation using the GPU.
Can you please help with a tutorial for transform
Thanks mate, saved me 9 minutes, was afraid it's not transform
I can't believe that you just explained easiest and simplest way to do that. 🤩🤩 Thanks Bro 😎
You're welcome bro and don't forget to watch my other videos.
@@CodingNepal Definitely 👍😇
The way you set up your video thumbnail. 📹
that shows your passion, your dedication, your skill. 👨💻
I haven't seen such simple and minimal (HTML, CSS, JS) tutorials anywhere on TH-cam. 😍
Your videos prove to be very helpful in my project (making react components). 😇
Keep it Bro 👍😎✨❤
@@roxiejain6221 Many many thanks to you. I really appreciate it 😃
@@CodingNepal you explained it better than w3 schools and the mdn. Your content was straight to the point. Thanks man.
हजुरको काम धेरेे राम्रो छ दाई येस्तेे भिडियाहरु राखिरहनु। हजुरको भलो होस्। Love From Nepal
Hunxw.. Keep loving
Thanks. You saved my day. I implemented this with someone else's code. However margin-left creating mess. Using just left property of div worked to position div in the beginning as you shown. Thanks once again.
Just awesome❤️🔥
NEPAL 🇳🇵✌️
Thank you 🔥
Can you make dragable list to put another div using drag
I'll think about it.
Great content once again Sir exactly what I needed
Many many thanks 🔥
To copy right? 😂😂
@@codingknowledge9148 😃
Omg,this is so nice sir! Superb work😊
Thanks a lot
i love this
Thank you
Mannnn... That's very nice 😉👌, im really like it!!!
Many many thanks 🔥
amazing bro
Thanks bro 🔥
Great Content Brother 🔥🙏
Thanks brother
from where you get such amazing ideas....!🤘
It's all about experience.
@@CodingNepal Great..!👍
I love this!! ❤️ How do you make the div move only inside the límits of the screen?
this is exactly what i was looking for thank you
4:30, starting with the move script
Sir please make a video on pagination with bootstrap 5 and php, with ajax and without ajax
Sir , we need shopping cart with JavaScript and local storage and contains..sign up .. sign in.sign out ..add to favorites..add to cart..profile for user..admin page to add product etc..and page notification for admin to know the user who bought the product ..filter and search for product ..
Please ..please do it for us we wait you ..thanks sir ..❤️
Ok I will try
Awesome bro 😍😍 waiting for your voice
I'm thinking to add voice in my videos after 100k if possible.
Great project so useful 👌
Glad you think so!
omg this was stupidly simple. thank you I don't need to use libraries
One day you will cross 1M
Hope so. Keep supporting.
Awesome 🔥
Thanks 🔥
Thanks For Uploading. ❤️
I was in need of this, very thaaanks
Bro can we fix wrapper div after dragging it to a different position through mouseup event.
Btw Great Video Brother 🔥🙏
Sorry bro, I didn't understand. Can you please explain more?
@@CodingNepal bro i mean to say that drag though whole wrapper div .. not only header
I tried but there's problem
@@jatinsharma5859 Remove all the codes which are inside tag and paste the following codes.
const wrapper = document.querySelector(".wrapper");
function onDrag({movementX, movementY}){
let getStyle = window.getComputedStyle(wrapper);
let left = parseInt(getStyle.left);
let top = parseInt(getStyle.top);
wrapper.style.left = `${left + movementX}px`;
wrapper.style.top = `${top + movementY}px`;
}
wrapper.addEventListener("mousedown", ()=>{
wrapper.classList.add("active");
wrapper.addEventListener("mousemove", onDrag);
});
document.addEventListener("mouseup", ()=>{
wrapper.classList.remove("active");
wrapper.removeEventListener("mousemove", onDrag);
});
Now go to the css file, line.no 28, there is a .wrapper header.active replace this line with this .wrapper.active
@@CodingNepal are ty bro for this much effort 🙏🖤
Hey. What would be a real world example of this feature or ability?
It can be used on desktop softwares/applications.
nice tutorial , but , this has a side effect . If you move the mouse fast enough , the header will lose listener , you have to refresh the page , that is annoying
Super
We are expecting one complete ecommerce website sir..
Okay, I'll think about it.
@@CodingNepal thanks for your reply sir
Hey ! This was great tutorial. Please suggest me over this problem : i want to make them draggable only inside parent element it should not be dragged outside of parent element
@@yt_brij huh...
not working
Sir when will the article come on Instagram photo and video downloader website
Love from India ❤❤
I'll think about it. Keep visiting my site for more other helpful blogs.
@@CodingNepal Sir Please Write an article as soon as possible thank you, sir
Can you make level system? Like if you do something, you gain xp and when you have like 100xp, you level up to the first level, then you need to have 200xp to level up again and etc. I think it'll be super interesting to make and use.
if(xp >= 100){
level1()
}
Pc specification please?
CPU - Ryzen 3 3300x
Motherboard - MSI B450M Pro
GPU - Nvidia GTX 1650 4gb
Ram - Tforce RGB 8 * 2 = 16GB
Hard disk - 500GB
SSD - 256GB
@@CodingNepal Thank you.
Bro Can you Please make video on "How to make a custom QR code generator in PHP"?????
I will be waiting for your reply!
OKkkkkkkkkkkkk........
sir How can i get latitude and longitude by giving address manually ?
I didn't understand. Please explain more.
@@CodingNepalif i type my address on form , after submit api will fetch latitude and longitude according to my address,
And tell me how to use google map api
Op bro.😘😘😘
Thanks bro
I love it
Thanks
thanks bro i appreciate it
You're welcome bro
Cool bro
Thanks bro
How to stop div dragging using button
perfect tutorial !
I love your videos ! 🌺🌹
can you make this draggable div drag with mouse and touch?🙏
It doesn't work in mobile
Try to add "touchmove" event!
Perfect
Can you learn to make line graph only html and css and javascript?
Please please please
Can you explain more?
@@CodingNepal of course 😄
A line graph (not using graphics libraries), if possible only with html and css, otherwise canvas or svg
Nice
Thank you
What if i want multiple of those?
@CodingNepal, Can I Ask You Something? Is There We Can Get The Local Storage Of Where The Draggable Div Element Was? So Suppose I Last Dragged The Element On x = 43 and y = 26, Can We Get The Local Storage Of That So The Next Time The User Reloads That Page, The Element Will Be In Those Coordinates?
Yes, you can store the element x and y positions to localStorage of the browser and retrieve it.
@@CodingNepal Can You Make A Short Video Of You Doing It Please? I Cannot Figure Out How To.
its not working in touch screen device what is the solution
Purple is your fav color
No..but I like it.
Sir How to create Text editor using javascript, css, html, jQuery
Op
It not works in mobile device
Hii bro all looks osom🤩🤩 but it does not work in android device can you fix it🙄🙄
There is no fix bro. Mouse events are not work on mobiles.
@@CodingNepal so can I use mouse in mobile and use it? Throughout OTG
Did the exact same, but nothing is working even a bit..😵💫
hello bro nice work.
but i want something different.... i will put this wrapper into another div which width will 75% from body... so i want that the wrapper element will not go outside of its parent div
please tell me the process
Hey I'm trying similar one ! Did you find any solution ?
Next card slider please
Here is the video - th-cam.com/video/YunLfczBbkY/w-d-xo.html
goddess
thanks
You're welcome
You say "Live Demo or Download Codes of this Draggable Div"
But there is NO ACTUAL place where we can Download source .
Please provide Download URL .
Thank you !!!
Just click on Download Code Files button on the demo page and you'll redirected to my website. Search the title of the video and you'll see the blog post with source codes.
op
Thanks 🔥
@@CodingNepal thanks to you bro to teach us such a good things
You're welcome bro
If you're about to make a draggable image, put draggable="false" attribute in the HTML, won't work without it
You are awesome.
What's Your name?
Thanks and I'm Prakash
great video!! anybody know what exactly `${}` in this example does?
It is called template strings (" ` ` "), it is used to insert variables in strings.
A lot of people watch content on mobile devices ... make the font bigger or at least talk while you write or do both. This is very hard to understand to people like me who has a little impaired eyes, and most people in software field loose eyesight staring for a long time in front of their screens
Also for my front end developers... there seems to be mousemove event listener, which gives you mouse events , which you pair with mouse up and down events the object contains movementX and movementY keys .. which you add to your div after getting its computedwidth
Is Free Fire banned in Nepal ?
I don't know about it.
Bro I need English to nepali date converter
Okay I'll think about it
@@CodingNepal thanks bro & if you would keep tutorial videos than it would be better. Like Javascript tutorial for beginners, Css tutorial, jQuery tutorial, etc this will help you & us as well nowadays people try to learn coding & they search for tutorials so if you would keep that then your channel would grow faster than now
First
Great.. Enjoy the video.
@@CodingNepal yeah! OF Cause bro
English to nepali date
English to nepali date
* Thanks BUT
What I really want to know is "how to Drop an image AMYWHERE om Page"
Can you help me out with that ? pure js no links to other web stuff ,
Or can anyone else aim me at a Tutorial that can Help ?
Thanks