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);

    ]];

  }

}