ID없이

Question

드래그 앤 드롭이 데모에서 : http://www.netmagazine.com/files/tutorials/demos/2013/01/create-drag-and-drop-features-in-html5/demo/demo.html
드래그 앤 드롭을 사용하여 항목을 이동할 수 있습니다.
이 작업을 수행하는 코드는 매우 간단합니다 :

가 요소의 ID를 저장 한 후 DOM에 해당 ID를 찾아에 appendChild를 사용하여 이동 무엇 일 것입니다

function dragUser(user, event) { 
    event.dataTransfer.setData('User', user.id); 
} 
function dropUser(target, event) { 
    var user = event.dataTransfer.getData('User'); 
    target.appendChild(document.getElementById(user)); 
} 

.
내가 경험하는 문제는 ID가없는 요소가 있다는 것입니다.

<span class=".myClass">item</span> 

그래서 요소를 고유하게 식별 할 방법이 없으므로 요소를 이동하는 방법을 모르겠습니다.

Answer 1

실제로는 id가 필요하지 않습니다. 문자열로 표현할 수있는 식별자는 모두 가능합니다 (getData/setData은 문자열 값에서만 작동하기 때문입니다). 이미 존재하는 것이 없다면 단순히 뭔가를 만들 수 있습니다.

var elements = []; 

function dragUser(element, event) { 
    var index = elements.indexOf(element); 
    if (index == -1) { 
     // not already existing in the array, add it now 
     elements.push(element); 
     index = elements.length - 1; 
    } 

    event.dataTransfer.setData('index', index); 
} 

function dropUser(target, event) { 
    var element = elements[event.dataTransfer.getData('index')]; 
    target.appendChild(element); 
} 

See it in action : 여기에서는 어레이에서의 인덱스 (문자열로 표현 될 수 없음) 요소에 (어느 것이 수)에 연관 허용 가능한 요소들의 어레이를 갖는다.

이 코드는 Array.indexOf을 사용합니다. 즉, IE < 9를 의미하지는 않지만 쉽게 해결할 수있는 기술적 세부 사항입니다.

Answer 2

dropUser 함수 에 이벤트를 기록하고 (event.target || event.srcElement). 무엇이 필요한지 검색하십시오. 당신이 아이디의이없는 경우

 function dropUser(target, event) { 
console.log(event) 
      var user = event.dataTransfer.getData('User'); 
      target.appendChild(event.target||event.srcElement); 
     } 

Answer 3

, 우리는 동적으로 생성하고 그 dragabble 요소의 ID와 대상 요소에 있음을 삭제 한 후, 우리는 그 id 값을 제거 할 수 있습니다. 이 시나리오는 나를 위해 일했습니다.

taskItem.addEventListener('dragstart', function (event) { 
event.target.id = "taskid"; 
event.dataTransfer.setData("taskItem", event.target.id); 

}, false);

앤 드롭 핸들러는

taskView.addEventListener('drop', function (event) { 
     event.preventDefault(); 
     var data = event.dataTransfer.getData("taskItem"); 
     var element = document.getElementById(data); 
     event.target.appendChild(element); 
     element.removeAttribute('id'); 
    }, false);