javascript - 如何拖放到 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