Great job!!! When you drag an item on the same box below you get null inserted. Fix this with if condition if (selected !== null){leftBox.appendChild(selected)}
The Channel is one of the best channel. When ever i search about html css and js, this channel always popup in the search and you explains everything well. KEEP IT UP !!
Have you ever noticed how (and i am not sure about the politically correct terms here and not trying to assume anyone's nationality. sjw's calm down) Indian's/Pakistani/Southeast-Asian people speak English? "We are going to create an HTML page With............. css and javascript. The drag n drop will allow you to drag the................ box to the other box!"... the pauses.... :) lolol... I figure their native languages must be spoken like that, so they carry it over to English. I love linguistics so much. It's so interesting! Awesome video!!!! Thanks!!!!!
Bro your tutorial real help full ,Learning through the projects. I am facing a problem which you discussed in this video,which drag eventListener . Problem this doesn't work in phone and tablet screen how can we make a element dragable in phone screen
The code is overly complicated. You only need to install the event handles for "dragover" and "drop" once for each box: leftBox and rightBox. In your code you not only do it in a loop for each list item, but also every time a drag is started. All you need to do in the for-loop is to add the event listener for the "dragstart" event. This event stores the target in selected. Declare selected at the top of the script, after "let leftBox..."
So my question is if you creat the same 2 boxes but this time you will create a input and upon adding a input it will store in first box and we can drag it into second box please make tutorial
Hi Sir , There is an error coming in console which is : Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at HTMLDivElement., please help to resolve this
First thank you for this tutorial very informative. I have an Html/JavaScript app in which I drag a dot/point around a 360 degree circle. It works fine on computer, however; I need a code to get the drag function to work on my iPhone. Any suggestions please?
I want a pictur of a bird with blank outline and when a user take each part and drag in to the real place from array of parts such as tale, beak and So on how?
but a bug appear due to select = null. for the first drag it work very well but then for the second and the third bug appear due to selected = null. I need to ask chatGPT fix the code for me by set select to global variable and use a if statement to avoid not excute the append child if there is a null value. Omg think about if I don't have ChatGPT, your code will never work. However thank about the idea
Hi, GreatStack, Thank you for your video. This is very useful. I have a question because I have an error completing it. 'Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.' This error message shows up when I drag and drop at the second time. Do you know how to solve this?
Because you have to add an event listener for all the elements. If you add one event listener as you say, then it would work only for this one and the rest of the elements would do nothing.
How would I drag a block and at the same time drag another in front of it, for example, if there was a third dotted box and when you take the "List item 1" box to the second box, the "List item 2" would be dragged at the same time and placed In the third?
Instead of using “document.getElementsByClassName”, try “document.querySelectorAll(‘.lists’);” And for the “for of loop”, do it like this “for (let list of lists) {}”.
Hi, thank you for your video the first drag is workink perfectly, but the second one genrates an error in the console: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node' have you an idea?
![YoungBoy Never Broke Again - Missing Everything [Official Video]](http://i.ytimg.com/vi/dTYeMZGzOzw/mqdefault.jpg)
Great job!!!
When you drag an item on the same box below you get null inserted. Fix this with if condition
if (selected !== null){leftBox.appendChild(selected)}
The Channel is one of the best channel.
When ever i search about html css and js, this channel always popup in the search
and you explains everything well.
KEEP IT UP !!
Easy tutorial for begginers. There is some bug ...or feature i don`t know. You can also drug and drop icons separete from the list.
This is very easy to fix. You have to put a draggable="false" in the at the end
Thank you so much! I'm doing a school project and this was the most helpful video I could find! Subscribed!!
I don't understand in the {for(list of lists)}. how this is happened
Learn javascript loops👈👈
Have you ever noticed how (and i am not sure about the politically correct terms here and not trying to assume anyone's nationality. sjw's calm down) Indian's/Pakistani/Southeast-Asian people speak English? "We are going to create an HTML page With............. css and javascript. The drag n drop will allow you to drag the................ box to the other box!"... the pauses.... :) lolol... I figure their native languages must be spoken like that, so they carry it over to English. I love linguistics so much. It's so interesting! Awesome video!!!! Thanks!!!!!
thats southAsian thing lol. Even muted video works as it's a programming video
Why dragging to left is not working
(JavaScript part) . But the video is awesome helpful for me. because iam a beginner 🎉🎉❤❤
Not working for me too... I dont know why
what a classic content helped me lot thanks man
Works perfectly, thanks
much cleaner solution than others that I've seen !!
Thank You! 😊Keep doing more projects like this.
Nice lesson, thank you so much GreatStack.
Very simple and easy explanation
nice! you make my day
I'm glad! Thank you. 😊
very useful and easy to apply. thank you.
Thank you for this very useful video!
Bro your tutorial real help full ,Learning through the projects. I am facing a problem which you discussed in this video,which drag eventListener . Problem this doesn't work in phone and tablet screen how can we make a element dragable in phone screen
Wow, this tutorial is very cool. Thanks Avinash.
Sir in my code, images are also seperately draggable(means outside their container div). What to do for fixing that 😥
Thank you it's a very easy Tutorials
Thank you for this tutorial
What is the benefit of this project.. I mean I have never heard about these events before .. do these get used in web development
The code is overly complicated.
You only need to install the event handles for "dragover" and "drop" once for each box: leftBox and rightBox.
In your code you not only do it in a loop for each list item, but also every time a drag is started.
All you need to do in the for-loop is to add the event listener for the "dragstart" event. This event stores the target in selected. Declare selected at the top of the script, after "let leftBox..."
Super, I wan't this, thank you
Very encouraging, thanks
I want to do pick and ban in Dota2 as a website. Hope you give us lesson Thank you
Great tutorial tnx :)
Thank you so much.
Thank you!
So my question is if you creat the same 2 boxes but this time you will create a input and upon adding a input it will store in first box and we can drag it into second box please make tutorial
Thanks, this helped me a lot!
Why when i drag like 2 li from box 1 too box 2 and drag back item 1 is just drag all 2 of the li at the same time????
amazing! doing it now
Hi Sir , There is an error coming in console which is : Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at HTMLDivElement., please help to resolve this
Make the selected variable global and set it to null initially. Then move the rightBox and leftBox operations outside the for loop. It will be fixed
First thank you for this tutorial very informative. I have an Html/JavaScript app in which I drag a dot/point around a 360 degree circle. It works fine on computer, however; I need a code to get the drag function to work on my iPhone. Any suggestions please?
Thank you bro, the code did not work on touch screens.
excellent, I want to learn about wedding hotel reservation websites for my Assignment, please upload quickly
done, thanks a lot
Bhai ab api async await ki bhi practice vdos 4-5 video for each topic
Thank you
Thanks bro
Welcome
mine doesnt work ive copied the code and tried everything but still it doesnt!!
Same with me
Cool thanks!
What vs code theme do you use?
I enjoyed it
Thanks fatemeh, Please checkout this best 30 JavaScript projects, I am sure you will love it: ruclips.net/p/PLjwm_8O3suyOgDS_Z8AWbbq3zpCmR-WE9
sir if i use "class" instead of "id" it does not work please explain this
thank you
I want a pictur of a bird with blank outline and when a user take each part and drag in to the real place from array of parts such as tale, beak and So on how?
How do we implement this using drag handle?
It was hard to me until this video
Glad it helped
Nice Challenge
can I get a link that shows only code not video
Why it's not working for all screen
but a bug appear due to select = null. for the first drag it work very well but then for the second and the third bug appear due to selected = null. I need to ask chatGPT fix the code for me by set select to global variable and use a if statement to avoid not excute the append child if there is a null value. Omg think about if I don't have ChatGPT, your code will never work. However thank about the idea
Doesn't this add an event listener every time you drag an item? Then on other drag and drops it will try to add null on new drops.
Yes. I made it with a global variable and just added the listeners to leftBox and righBox outside the loop.
yes.. this will cause memory leak and performance issue...
Hi, GreatStack,
Thank you for your video. This is very useful.
I have a question because I have an error completing it.
'Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.'
This error message shows up when I drag and drop at the second time.
Do you know how to solve this?
Did you determine the right seleted?
I am facing the same issue..have you figure out the answer to this?
There might be an error with your dom selector. You might have selected it the wrong way. JS is not recognising an html element.
When i console log it its a node..
You should declare selected outside of the loop
hey bro plz do it with images.thankyou:D
can someone tell me why to use a for loop , when we are just selecting a single element
Because you have to add an event listener for all the elements. If you add one event listener as you say, then it would work only for this one and the rest of the elements would do nothing.
the draggable html api does not work the same in every browser
search for a package for drag and drop functionality
how?
whare is easy tutorial
Hello sir,
Please make javascript script complete course
How would I drag a block and at the same time drag another in front of it, for example, if there was a third dotted box and when you take the "List item 1" box to the second box, the "List item 2" would be dragged at the same time and placed In the third?
simple do the same code for 3rd box
GoodJob!
Image source please
Just added the google drive link in the description, please check.
The drag item will be very blur if it size is to big (about 400px), can anyone explain this for me, thank you❤
i am facing same issue if you find the solution please let me know
How to put specified draggble item in specified drop location?
source code bhi de dia karo
bro how can i make animatin text in css please tell me
plzz share github link for this code
Hi
Not working in mobile
Javascrpt is not working and showing an error
That's the very javascript thing.
@@voyage7601 what do you mean
Instead of using “document.getElementsByClassName”, try “document.querySelectorAll(‘.lists’);”
And for the “for of loop”, do it like this “for (let list of lists) {}”.
u can ask chat gpt to correct the code if there is any mistake. bt make sure u read the answer before using it just to learn what exactly the code is
Be brave and defeat the error
Hi, thank you for your video
the first drag is workink perfectly, but the second one genrates an error in the console: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
have you an idea?
you can write me on email with your code's screenshot. Email [avinashdm@outlook.com]
@@GreatStackDevI need your assistance and would send mine to your mail
where is png image file?
I just wrote in google images "transparent image with 6 dots" and the 1st one looked similar.
It doesn’t work 😭
it is not working
source code plz
please tell us
atleast provide me the
code
@@jaytgk3861 yup ☺️
@@jaytgk3861 yup ☺️
... 💚💛❤🙏
Indien english 😂
Thank you so much 👍
Thank you
bro how can i make animatin text in css please tell me
please tell us
please tell us
bro how can i make animatin text in css please tell me
bro how can i make animatin text in css please tell me
bro how can i make animatin text in css please tell me
bro how can i make animatin text in css please tell me