javascript Перетаскивание, пустой контейнер

Question

Моя цель - очистить любой div .create и удалить любой элемент внутри него, прежде чем я поместил ссылку редактирования внутри, я попытался, но я не могу. У меня есть этот код:

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> 

И это 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)); 
} 

Спасибо.

Answer 1

Обратите внимание на сроки редактирования. OP отредактировал в id и зафиксировал TypeError с .innerHTML после того, как был отправлен ответ.

---

Если вы проверяете JS консоль, вы, вероятно, увидите целую кучу этих ошибок.

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

Это потому, что .innerHTML является собственностью, но не метод. Вы назначаете свойство.

container.innerHTML = ''; 

Кроме того, ваш перетаскиваемым элемент отсутствует идентификатор, так

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

не будет действительно ничего устанавливать, что приведет к

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

попытаться клонировать значение null. Но вы не должны клонировать уникальные элементы, независимо. (См .: ID attribute)

Рассмотрите возможность переосмысления реализации и определенно посмотрите на unobtrusive JavaScript. С этим очень сложно работать.

Некоторые материалы для чтения:

• Drag and drop
• addEventListener