javascript - Drag & Drop Image and mantain its thumbnail -
I'm trying to create a small drag and drop gallery. I have my small gallery of images and I want to draw them and then drop them into another specific diva. At present, the images fall in the moment of drop. This makes many emotions because I am not saving any reference to the object that was drag. I'm showing this effect. After that I thought, if I would clone the object that I was pulling and adding it to the image gallery, but it would not work. It only pulls for the first time when I drag it, and the image changes in position, the second time it stops working for the first time when Data does not return drag1 back for the first time It is, but returns the image for the first time, not sure why it does this, here it is one. This is HTML. I have tried to do this, but I have not got it. Thank you. I found the solution I was telling the clone image poorly. functional function drop (ev) {ev.preventDefault (); Var data = ev.dataTransfer.getData ("text"); Var cpydata = document.getElementById (data); Ev.target.appendChild (cpydata); }
function drop (ev) {ev.preventDefault (); Var data = ev.dataTransfer.getData ("text"); Var cpydata = document.getElementById (data); CpydataElement = cpydata.cloneNode (true); Var columnID = document. GetElementById ("column"); Cpydata.removeAttribute ("id"); Ev.target.appendChild (cpydata); ColumnId.innerHTML = columnId.innerHTML + cpydataElement.outerHTML; }
& lt; Div id = "div1" ondrop = "drop (event)" ondragover = "allowdrop (event))" & gt; & Lt; / Div & gt; & Lt; Br> & Lt; Div id = "column" & gt; & Lt; Img id = "drag1" src = "http://collectionofpicture.com/wp-content/uploads/2013/11/high-resolution-landscape-wallpaper-69.jpg" draggable = "true" class = "test" & Gt; & Lt; Img id = "drag2" src = "http://collectionofpicture.com/wp-content/uploads/2013/11/3d-landscape-wallpaper-131.jpg" dragable = "true" class = "test" & gt; & Lt; Img id = "drag3" src = "http://collectionofpicture.com/wp-content/uploads/2013/11/natural-landscape-wallpaper-91.jpg" dragable = "true" class = "test" & gt; & Lt; / Div & gt;
function drop (ev) {ev.preventDefault (); Var data = ev.dataTransfer.getData ("text"); Var cpydata = document.getElementById (data); CpydataElement = cpydata.cloneNode (true); Var columnID = document. GetElementById ("column"); CpydataElement.removeAttribute ("id"); Ev.target.appendChild (cpydataElement); }
Comments
Post a Comment