dataTransfer.setData(' text / plain的',NULL)

时间:2017-02-24 15:12:41

标签: javascript drag-and-drop

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

  

ondragstart =" event.dataTransfer.setData(' text / plain的',NULL)">

我可以知道为什么会这样吗?因为没有它,代码似乎工作正常。何时需要getData()

<div class="dropzone">   <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
    This div is draggable   </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div>

<style>   #draggable {
    width: 200px;
    height: 20px;
    text-align: center;
    background: white;   }

  .dropzone {
    width: 200px;
    height: 20px;
    background: blueviolet;
    margin-bottom: 10px;
    padding: 10px;   } </style>

<script>
  var dragged;

  /* events fired on the draggable target */   document.addEventListener("drag", function( event ) {

  }, false);

  document.addEventListener("dragstart", function( event ) {
      // store a ref. on the dragged elem
      dragged = event.target;
      // make it half transparent
      event.target.style.opacity = .5;   }, false);

  document.addEventListener("dragend", function( event ) {
      // reset the transparency
      event.target.style.opacity = "";   }, false);

  /* events fired on the drop targets */   document.addEventListener("dragover", function( event ) {
      // prevent default to allow drop
      event.preventDefault();   }, false);

  document.addEventListener("dragenter", function( event ) {
      // highlight potential drop target when the draggable element enters it
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "purple";
      }

  }, false);

  document.addEventListener("dragleave", function( event ) {
      // reset background of potential drop target when the draggable element leaves it
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
      }

  }, false);

  document.addEventListener("drop", function( event ) {
      // prevent default action (open as link for some elements)
      event.preventDefault();
      // move dragged elem to the selected drop target
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
      }
       }, false);
</script>

0 个答案:

没有答案