Jump to content

JavaScript Drag and Drop on a fixed location


withinboy

Recommended Posts

There are 2 images, and 2 locations, lets named it img1, img2, loc1, and loc2. What im trying to do is drag and drop img1 to loc1, which mean i don't want img1 to be drop in loc2, i want the specific image drop on specific location.

function dropIn(evt){var root = document.getElementsByTagName("body")[0];evt.preventDefault();var id = evt.dataTransfer.getData("text");if(ev.target.getAttribute('data-drop') == id)ev.target.appendChild(document.getElementById(id));}<div id="box1" style="position: absolute; top: 220px; left: 220px;" ondragover="dragIn();" ondrop="dropIn();" ><img id="img1" class="resize" src="wreck.jpg" ondragstart="dragBegin()" draggable="true" style="cursor:move;"/></div><div id="loc1" data-drop="img1" style="border:1px solid black; position:absolute; left:400px; top:150px; width:160px; height:200px;"ondragover="dragIn();" ondrop="dropIn();" ></div><div id="box2" style="position: absolute; top: 220px; left: 300px;" ondragover="dragIn();" ondrop="dropIn();" ><img id="img2" class="resize" src="nah.jpg" ondragstart="dragBegin()" draggable="true" style="cursor:move;"/></div><div id="loc2" data-drop="img2" style="border:1px solid black; position:absolute; left:560px; top:150px; width:160px; height:200px;"ondragover="dragIn();" ondrop="dropIn();" 

so far the code above allow me to achieve what i want, but its not perfect, when i drop img1 to loc2, it did nothing. What i really want is when i drop img1 to loc2, the img1 is still dropped on the loc1. No matter where the img1 will be drop by user, the result of img1 will still be dropped on loc1, and same goes to img2, it will always be dropped on the loc2.I tried this but its not working

if(evt.target.getAttribute('data-drop') == id){evt.target.appendChild(document.getElementById(id));}else{evt.target.appendChild(document.getElementsByAttribute('data-drop'));}

is there any soloution for me? Thanks alot

Edited by withinboy
Link to comment
Share on other sites

getElementsByAttribute takes an attribute name and a value, not just an attribute name. It also returns a collection of elements, not a single element (that's why elements in plural in the name). You can't use appendChild with an element collection, just a single element, so you need to tell it which one in the collection you want to append. Your code isn't going to do that though, the way you have it written now, if they drag img1 to loc2, it will still not do anything with img1, but it will snap img2 to loc2 even though they dragged img1. What you need to do is use getElementsByAttribute to find the element with the data-drop attribute set to the ID that they dragged, and then append the image to that element instead of appending it to the event target.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...