In HTML5 I have 2 <section>s (2 boxes):
<section id="leftbox">
Drag an image here!
</section>
<section id="rightbox">
<img id="pic" src="images/img1.jpg">
</section>
I want to move the image between the 2 boxes usingJS. I've the following:
leftbox.addEventListener("dragenter", dragenter, false);
leftbox.addEventListener("dragleave", dragleave, false);
leftbox.addEventListener("dragover", function(e){e.preventDefault();}, false);
leftbox.addEventListener("drop", dropped , false);
rightbox.addEventListener("dragenter", dragenter, false);
rightbox.addEventListener("dragleave", dragleave, false);
rightbox.addEventListener("dragover", function(e){e.preventDefault();}, false);
rightbox.addEventListener("drop", dropped , false);
For example, When I'm in function "dragleave", how can I know if the image came from the right or the left box?
I am not fully understand your Question, But I guess you want to check if your dragged Item is from right or left box !!
Then you should do :
When dragenter then add the data attribute to the element that is dragged from the perticular box,by using something like $(this).parent() and define the attribute of dragged item if the box id is right then right or left for other ! And if you don't want to define the right or left then get offsetLeft.
May this helps you.. If you provide your fiddle then its easy to do so..
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments