sclass HFullScreenDropZone {
  S endOfBody() {
    ret div("", id := "fullScreenDropZone");
  }
  
  S css() {
    ret [[
      div#dropZone {
        background: gray;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        opacity: 0.6;
        visibility: hidden;
      }
    ]];
  }
  
  S js() {
    ret [[
      var dropZone = document.getElementById('fullScreenDropZone');
      
      function showDropZone() {
          dropZone.style.visibility = "visible";
      }
      function hideDropZone() {
          dropZone.style.visibility = "hidden";
      }
      
      function allowDrag(e) {
          if (true) {  // Test that the item being dragged is a valid one
              e.dataTransfer.dropEffect = 'copy';
              e.preventDefault();
          }
      }
      
      function handleDrop(e) {
          e.preventDefault();
          hideDropZone();
      
          alert('Drop!');
      }
      
      // 1
      window.addEventListener('dragenter', function(e) {
          showDropZone();
      });
      
      // 2
      dropZone.addEventListener('dragenter', allowDrag);
      dropZone.addEventListener('dragover', allowDrag);
      
      // 3
      dropZone.addEventListener('dragleave', function(e) {
          hideDropZone();
      });
      
      // 4
      dropZone.addEventListener('drop', handleDrop);
    ]];
  }
}