dataTransfer.getData ('текст') возвращает неопределенное

Question

Я пытаюсь следовать html5 перетаскивания учебник по http://www.html5rocks.com/en/tutorials/dnd/basics/#toc-dataTransfer

HTML, является:

<div id="words"> 
    <p class="word" draggable="true">word1</p> 
    <p class="word" draggable="true">word2</p> 
    <p class="word" draggable="true">word3</p> 
</div> 

В JS является:

var dragSrcEl = null; 
function handleDragStart(e) { 
this.style.opacity = '0.4'; // this/e.target is the source node. 
dragSrcEl = this; 
e.dataTransfer.effectAllowed = 'move'; 
e.dataTransfer.setData('text/html', this.inneHTML); 
} 

function handleDragOver(e) { 
if (e.preventDefault) { 
e.preventDefault(); // Necessary. Allows us to drop. 
} 

e.dataTransfer.dropEffect = 'move'; 

return false; 
} 

function handleDragEnter(e) { 
// this/e.target is the current hover target. 
this.classList.add('over'); 
} 

function handleDragLeave(e) { 
this.classList.remove('over'); // this/e.target is previous target element. 
} 

function handleDrop(e) { 
// this/e.target is current target element. 

if (e.stopPropagation) { 
e.stopPropagation(); // stops the browser from redirecting. 
} 
if (dragSrcEl != this) { 
// Set the source column's HTML to the HTML of the column we dropped on. 
dragSrcEl.innerHTML = this.innerHTML; 
this.innerHTML = e.dataTransfer.getData('text/html'); 
//this.innerHTML = temp; 
} 
return false; 
} 

function handleDragEnd(e) { 
// this/e.target is the source node. 

[].forEach.call(words, function (word) { 
word.classList.remove('over'); 
}); 
} 


var words = document.querySelectorAll('#words .word'); 
[].forEach.call(words, function(word) { 
    word.addEventListener('dragstart', handleDragStart, false); 
    word.addEventListener('dragenter', handleDragEnter, false); 
    word.addEventListener('dragover', handleDragOver, false); 
    word.addEventListener('dragleave', handleDragLeave, false); 
    word.addEventListener('drop', handleDrop, false); 
    word.addEventListener('dragend', handleDragEnd, false); 
}); 

КСС:

.word{ 
float:left; 
margin-right:5px; 
cursor:move; 
} 
.word.over{ 
color: #ff0000; 
} 

Однако, когда тест-код во всех браузерах или jsfiddle, целевое слово изменяется в порядке, но оригинальные изменения слова в «неопределенное» Я думаю, это потому, что

dragSrcEl.innerHTML = this.innerHTML; 

работает, но

this.innerHTML = e.dataTransfer.getData('text/html'); 

возвращает undefined, и тесты в jsfiddle подтвердили это.

Так почему

e.dataTransfer.getData('text/html'); 

возврат не определено?

Его значение должно быть выставиться на

e.dataTransfer.setData('text/html', this.inneHTML); 

не так ли?

Answer 1

Просто измените заместить часть на этом

var temp = this.innerHTML; 
this.innerHTML = dragSrcEl.innerHTML; 
dragSrcEl.innerHTML = temp; 

Demo: http://jsfiddle.net/fWq4T/

Answer 2

Изменить строку # 5

e.dataTransfer.setData('text/html', this.inneHTML); 

к

e.dataTransfer.setData('text/html', this.innerHTML); 

Надежда эта помощь