Как перетащить и перетащить в неупорядоченный список html

Question

Я хочу разрешить перетаскивание в неупорядоченный список html. Решение, которое я нашел, описано здесь: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2

Но, кажется, мне нужно указать идентификатор для каждого элемента моего списка (li), можно ли перетащить его без использования идентификатора?

Также в этом решении кажется, что я могу перетащить 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)); 
} 

[EDIT] Вот HTML уль:

<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