javascript拖放，空容器

Question

My goal is to clean any div .create and delete any element inside it before I put the edit link inside it, I have tried but I can't. I have this code:

http://codepen.io/anon/pen/Ejmemp

<div class="edit"><a class="link_edit" id="4545" href="edit.php?id=xxx" ondragstart="drag(event)">edit</a></div>

<div class="create" ondrop="drop(event,this)" ondragover="allowDrop(event)"><a href="create.php?id=xxx" class="link_create">create</a></div>

<div class="create" ondrop="drop(event,this)" ondragover="allowDrop(event)"><a href="create.php?id=xxx" class="link_create">create</a></div>

<div class="create" ondrop="drop(event,this)" ondragover="allowDrop(event)"><a href="create.php?id=xxx" class="link_create">create</a></div>

<div class="create" ondrop="drop(event,this)" ondragover="allowDrop(event)"><a href="create.php?id=xxx" class="link_create">create</a></div>

And this is the javascript:

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

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

function drop(ev,container){        
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");  
    /*doesn't work*/
    container.innerHTML = "";  
    /*I write clone because I want to keep the original*/            
    ev.target.appendChild(document.getElementById(data).cloneNode(true));
}

Thank you.

Answer 1

Please note the timing of the edits. The OP has edited in an id , and fixed the TypeError with .innerHTML after my answer was posted.

---

If you check your JS console, you'll probably see a whole bunch of these errors.

"Uncaught TypeError: container.innerHTML is not a function"

This is because .innerHTML is a property, but not a method . You assign to the property.

container.innerHTML = '';

Also your draggable element is missing an ID, so

ev.dataTransfer.setData("text", ev.target.id);

won't really set anything, which will cause

ev.target.appendChild(document.getElementById(data).cloneNode(true));

to attempt to clone a null value. But you shouldn't be cloning unique elements, regardless. (See: ID attribute )

Consider rethinking the implementation, and definitely look into unobtrusive JavaScript . That much inline JavaScript is cumbersome to work with.

Some reading material:

• Drag and drop
• addEventListener