tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

dnd-datatransfer-setdragimage-manual.html (2957B)

      1 <!DOCTYPE html>
      2 <html>
      3 
      4 <head>
      5  <style>
      6    div {
      7      margin: 0em;
      8      padding: 2em;
      9    }
     10 
     11    #source1,
     12    #source2 {
     13      color: blue;
     14      border: 1px solid black;
     15    }
     16 
     17    #target {
     18      border: 1px solid black;
     19    }
     20  </style>
     21  <script>
     22    function getSolidColorImageBase64(color) {
     23      var canvas = document.createElement('canvas');
     24      canvas.width = 256;
     25      canvas.height = 256;
     26      var ctx = canvas.getContext('2d');
     27      ctx.fillStyle = color;
     28      ctx.fillRect(0, 0, canvas.width, canvas.height);
     29      return canvas.toDataURL();
     30    }
     31    function setDragImage(ev) {
     32      var dragImage = document.createElement('img');
     33      if (ev.type === 'dragstart') {
     34        dragImage = document.getElementById('dragImage');
     35      }
     36      if (ev.type === 'dragover') {
     37        // Red color image
     38        dragImage.src = getSolidColorImageBase64('#FF0000');
     39      }
     40      if (ev.type === 'dragenter') {
     41        // Green color image
     42        dragImage.src = getSolidColorImageBase64('#00FF00');
     43      }
     44      if (ev.type === 'drop') {
     45        // Yellow color image
     46        dragImage.src = getSolidColorImageBase64('#FFFF00');
     47      }
     48      ev.dataTransfer.setDragImage(dragImage, 10, 10);
     49    }
     50 
     51    function dragstart_with_image_handler(ev) {
     52      ev.dataTransfer.setData("text/plain", ev.target.id);
     53      setDragImage(ev);
     54    }
     55 
     56    function dragstart_without_image_handler(ev) {
     57      ev.dataTransfer.setData("text/plain", ev.target.id);
     58    }
     59 
     60    function dragover_handler(ev) {
     61      setDragImage(ev);
     62      ev.preventDefault();
     63    }
     64 
     65    function drag_enter(ev) {
     66      setDragImage(ev);
     67      ev.preventDefault();
     68    }
     69 
     70    function drop_handler(ev) {
     71      setDragImage(ev);
     72      ev.preventDefault();
     73      var data = ev.dataTransfer.getData("text");
     74      ev.target.appendChild(document.getElementById(data));
     75    }
     76  </script>
     77 </head>
     78 
     79 <body>
     80  <div id="dragImageDiv">
     81  </div>
     82  <div>
     83    <p id="source1" ondragstart="dragstart_with_image_handler(event);" draggable="true">
     84      Select this element, drag it to the Drop Zone and drag image
     85      should be visible. The drag image should be identical to the above image.
     86      And the drag image should not change through out the drag and drop operation.
     87    </p>
     88  </div>
     89  <div>
     90    <p id="source2" ondragstart="dragstart_without_image_handler(event);" draggable="true">
     91      Select this element, drag it to the Drop Zone and drag image
     92      should not be visible.
     93    </p>
     94  </div>
     95  <div id="target" ondragenter="drag_enter(event);" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
     96    Drop Zone
     97  </div>
     98  <script>
     99    var initialDragImage = document.createElement('img')
    100    // Blue color image
    101    initialDragImage.src = getSolidColorImageBase64('#0000FF')
    102    initialDragImage.id = "dragImage"
    103    var dragImageDiv = document.getElementById('dragImageDiv')
    104    dragImageDiv.appendChild(initialDragImage);
    105  </script>
    106 </body>
    107 
    108 </html>