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. function drop (ev) {ev.preventDefault (); Var data = ev.dataTransfer.getData ("text"); Var cpydata = document.getElementById (data); Ev.target.appendChild (cpydata); }

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.

  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; }   

This is HTML.

  & 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;   

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.

  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); }   

functional

Comments

Popular posts from this blog

ios - Adding an SKSpriteNode to SKScene from a child SKSpriteNode -

Matlab transpose a table vector -

c# - Textbox not clickable but editable -