Merge branch 'main' of https://github.com/sanketj/web-dev-samples

sanketj · Jan 9, 2024 · a04b9f7 · a04b9f7
2 parents 1ee082c + 5b9b1e5
commit a04b9f7
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 0 deletions.
diff --git a/clipboard/datatransfer-cleardata-keep-files.html b/clipboard/datatransfer-cleardata-keep-files.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <style>
+ </style>
+ </head> 
+ <body>
+ <script>
+ // 1. create a data transfer
+ const dataTransfer = new DataTransfer();
+
+ // 2. add items to the data transfer
+ const filename = "1.png";
+ const file = new File(["🕺💃"], filename, {
+ type: "image/png"
+ });
+
+ const filename2 = "2.png";
+ const file2 = new File(["🕺💃"], filename2, {
+ type: "image/png"
+ });
+
+ dataTransfer.items.add(file);
+ dataTransfer.items.add(file2);
+
+ dataTransfer.items.add("hi", "text/plain");
+ dataTransfer.items.add("new octet item", "application/octet-stream");
+
+ // 3. clear the data in the data transfer
+ dataTransfer.clearData();
+
+ console.log(dataTransfer.items.length);
+ </script>
+ </body>
+</html>
diff --git a/clipboard/datatransfer-types.html b/clipboard/datatransfer-types.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <style>
+ #draggable-div,
+ #drop-zone {
+ border: 2px solid black;
+ }
+ #drop-zone {
+ height: 100px;
+ }
+ </style>
+ </head> 
+ <body>
+ <div id="draggable-div" draggable="true">Draggable div</div>
+ <br/>
+ Drop Zone:
+ <div id="drop-zone"></div>
+ <script>
+ let draggableDiv = document.getElementById('draggable-div');
+ draggableDiv.addEventListener('dragstart', (event) => {
+ console.log('draggableDiv dragstart');
+ event.dataTransfer.setData('text/plain', 'This text may be dragged');
+
+ const filename1 = "1.png";
+ const file1 = new File(["🕺💃"], filename1, {
+ type: "image/png"
+ });
+ event.dataTransfer.items.add(file1);
+ console.log('DataTransfer items length: ' + event.dataTransfer.items.length);
+ console.log('DataTransfer files length: ' + event.dataTransfer.files.length);
+ console.log('DataTransfer types length: ' + event.dataTransfer.types.length);
+ });
+
+ let dropZone = document.getElementById('drop-zone');
+ dropZone.addEventListener('dragover', (event) => {
+ event.preventDefault();
+ console.log('dropZone dragover');
+ });
+ dropZone.addEventListener('drop', (event) => {
+ event.preventDefault();
+ console.log('dropZone drop');
+ console.log('DataTransfer items length: ' + event.dataTransfer.items.length);
+ console.log('DataTransfer files length: ' + event.dataTransfer.files.length);
+ console.log('DataTransfer types length: ' + event.dataTransfer.types.length);
+ });
+ </script>
+ </body>
+</html>
diff --git a/drag-and-drop-sample.html → clipboard/drag-and-drop-sample.html b/drag-and-drop-sample.html → clipboard/drag-and-drop-sample.html