如何拖放到html无序列表中

Question

我想允许拖放到 html 无序列表中。我找到的解决方案在这里描述：http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2

但似乎我需要为列表中的每个元素 (li) 赋予一个 id，是否可以在不使用 id 的情况下进行拖放？

在这个解决方案中，我似乎可以将一个 li 拖到另一个解决方案中，我该如何防止这种情况发生？

这是我现在拥有的示例（javascript）：

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

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

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

[编辑] 这是html ul：

<ul id="members-list" ondragover="allowDrop(event)" 
    ondrop="drop(event)">
  <li id="drag1" class="group-member" 
      ondragstart="drag(event)" 
      draggable="true">
      <a href="">
        <img class="member-photo" 
             src="images/a.jpg" 
             alt="Bernardo Figueiredo"/>
        <div class="member-info">
          <p>bla</p>
          <p>blabla</p>
        </div>
      </a>
  </li>
  <!-- Other li -->
</ul>

Answer 1

您可以使用全局变量，将其保存到 drag() 中的该变量中，然后在 drop() 中访问它

var elem;

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

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
    elem = ev.target;
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(elem);
}    

Demo