dataTransfer.setData('文本/纯文本',null)

Question

这是来自MDN的拖动示例我无法获取 ondragstart 部分。

\n\n

\n

ondragstart="event.dataTransfer.setData(\'text/plain\',null)">

\n

\n\n

我可以知道它为什么在那里吗？因为如果没有它，代码似乎可以正常工作。什么时候需要一个getData()？

\n\n

<div class="dropzone">   <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData(\'text/plain\',null)">\n    This div is draggable   </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div>\n\n<style>   #draggable {\n    width: 200px;\n    height: 20px;\n    text-align: center;\n    background: white;   }\n\n  .dropzone {\n    width: 200px;\n    height: 20px;\n    background: blueviolet;\n    margin-bottom: 10px;\n    padding: 10px;   } </style>\n\n<script>\n  var dragged;\n\n  /* events fired on the draggable target */   document.addEventListener("drag", function( event ) {\n\n  }, false);\n\n  document.addEventListener("dragstart", function( event ) {\n      // store a ref. on the dragged elem\n      dragged = event.target;\n      // make it half transparent\n      event.target.style.opacity = .5;   }, false);\n\n  document.addEventListener("dragend", function( event ) {\n      // reset the transparency\n      event.target.style.opacity = "";   }, false);\n\n  /* events fired on the drop targets */   document.addEventListener("dragover", function( event ) {\n      // prevent default to allow drop\n      event.preventDefault();   }, false);\n\n  document.addEventListener("dragenter", function( event ) {\n      // highlight potential drop target when the draggable element enters it\n      if ( event.target.className == "dropzone" ) {\n          event.target.style.background = "purple";\n      }\n\n  }, false);\n\n  document.addEventListener("dragleave", function( event ) {\n      // reset background of potential drop target when the draggable element leaves it\n      if ( event.target.className == "dropzone" ) {\n          event.target.style.background = "";\n      }\n\n  }, false);\n\n  document.addEventListener("drop", function( event ) {\n      // prevent default action (open as link for some elements)\n      event.preventDefault();\n      // move dragged elem to the selected drop target\n      if ( event.target.className == "dropzone" ) {\n          event.target.style.background = "";\n          dragged.parentNode.removeChild( dragged );\n          event.target.appendChild( dragged );\n      }\n       }, false);\n</script>\n

\n