1

Newbie, using HTML, CSS, and Javascript. Currently working on a simple drag and drop practice page, and I believe I have the drag part down (i think) but I'm struggling because my ultimate goal is to have these two file icon images be able to drag and drop into a recycle bin image (as if i were sending them to an actual recycle bin), and both or either of the file icons disappear. It's not much and it's not pretty, but here's the code I have so far:

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTranfer.getData("text");
  ev.target.appendChild(document.getElementById(data))
  }
#trash {
  width: 70px;
  height: 70px;
  border: 1px solid black;
}
<img id="trash" src="trash_can.png" "ondrop"=drop(event)" ondragover="allowDrop(event) ">
    <br>
    <img id="item1 " src="file_icon.png " draggable="true" ondragstart="drag(event) " width="70 " height="70 ">
    <img id="item2 " src="file_icon.png " draggable="true" ondragstart="drag(event) " width="70 " height="70 ">
Manish
  • 4,692
  • 3
  • 29
  • 41
B. Brig
  • 21
  • 1
  • 1
    You’ve got a syntax error: there’s a missing `)` before the last `}`. Use the [browser console (dev tools)](http://webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. Use tools like [JSHint](http://jshint.com/) to find problems with your code immediately. – Sebastian Simon Mar 13 '17 at 04:39
  • `and both or either of the file icons disappear. It's not much and it's not pretty` What do you mean by this. Isn't this the behavior you want. What is the expected output/result – Manish Mar 13 '17 at 04:46
  • You could trigger a JQuery hide function ondragend: https://www.w3schools.com/tags/ev_ondragend.asp This question might be related: http://stackoverflow.com/questions/9796934/jquery-ui-remove-element-when-dropped-into-a-div-using-droppable – RubyRube Mar 13 '17 at 04:52
  • Please note that, historically, the drag and drop interface and implementation [have actually been a bit of a challenge](http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html). Don't beat yourself up if this project proves difficult-- calling it a "simple practice page" is something of a misnomer-- you're actually jumping into the deep end a little bit. – Alexander Nied Mar 13 '17 at 05:12
  • 1
    Also, seconding @Xufox -- in addition to the syntax error he called out, you run into an issue with the double-quotes on your `#trash` element-- `"ondrop"=drop(event)"` should be simply `ondrop="drop(event)"`. The browser will manage to smooth over _some_ errors for you (particularly in HTML), but the more code you write with proper syntax means the less guess work the rendering engine has to do, so the higher likelihood you get a page displaying and behaving as expected. – Alexander Nied Mar 13 '17 at 05:15

0 Answers0