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

如何拖放到html无序列表中

1 个答案: