정렬되지 않은 html 목록으로 끌어다 놓는 방법

Question

html 순서가 지정되지 않은 목록에서 끌어서 놓기를 허용하려고합니다. 내가 찾은 해결책은 여기에 설명되어 있습니다 : http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2

그러나 내 목록 (li)의 각 요소에 ID를 부여해야합니다. ID를 사용하지 않고 끌어서 놓기를 수행 할 수 있습니까?

또한이 솔루션에서 다른 하나의 내부를 끌 수있는 것 같습니다. 어떻게 방지 할 수 있습니까?

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); 
}