Jump to content
Sign in to follow this  
withinboy

JavaScript Drag and Drop on a fixed location

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...