From 14527558ecc6e318f0c63ca78063be53c4699f36 Mon Sep 17 00:00:00 2001
From: mukesh patidar <patidarmukesh123@gmail.com>
Date: Tue, 11 Oct 2022 00:08:51 +0530
Subject: [PATCH] New Drag and Drop Features of HTML5 Added

---
 drag&drop/index.html |  58 +++++++++++
 index.html           | 239 +++++++++++++++++++++++++++----------------
 2 files changed, 207 insertions(+), 90 deletions(-)
 create mode 100644 drag&drop/index.html
diff --git a/drag&drop/index.html b/drag&drop/index.html
new file mode 100644
index 0000000..65e74fc
--- /dev/null
+++ b/drag&drop/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>HTML Tips and Tricks - Output</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" type="text/css" media="screen" href="../main.css" />
+
+    <style>
+      #div1 {
+        width: 180px;
+        height: 250px;
+        padding: 10px;
+        border: 1px solid #aaaaaa;
+        background-color: #fff;
+      }
+    </style>
+    <script>
+      function allowDrop(ev) {
+        ev.preventDefault();
+      }
+
+      function drag(ev) {
+        ev.dataTransfer.setData("text", ev.target.id);
+      }
+
+      function drop(ev) {
+        ev.preventDefault();
+        var data = ev.dataTransfer.getData("text");
+        ev.target.appendChild(document.getElementById(data));
+      }
+    </script>
+  </head>
+  <body>
+    <div class="demo">
+      <a href="../index.html" class="home">
+        <img src="../home.svg" alt="home" />
+      </a>
+      <p>Drag the image into the rectangle:</p>
+
+      <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+
+      <img
+        id="drag1"
+        src="../html5.png"
+        draggable="true"
+        ondragstart="drag(event)"
+        width="160"
+        height="220"
+      />
+    </div>
+  </body>
+</html>
diff --git a/index.html b/index.html
index 8187e29..ebe986b 100644
--- a/index.html
+++ b/index.html
@@ -1,98 +1,157 @@
 <!DOCTYPE html>
 <html>
-
-<head>
-    <meta charset='utf-8'>
-    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>HTML5 Feature Tips</title>
-    <link rel="apple-touch-icon" sizes="57x57" href="./favicons/apple-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="./favicons/apple-icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="./favicons/apple-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="./favicons/apple-icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="./favicons/apple-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="./favicons/apple-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="./favicons/apple-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="./favicons/apple-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="./favicons/apple-icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="192x192" href="./favicons/android-icon-192x192.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="./favicons/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon-16x16.png">
-    <link rel="manifest" href="./favicons/manifest.json">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <meta name="msapplication-TileImage" content="./favicons/ms-icon-144x144.png">
-    <meta name='viewport' content='width=device-width, initial-scale=1'>
-    <link href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap" rel="stylesheet">
-    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
-</head>
+    <link
+      rel="apple-touch-icon"
+      sizes="57x57"
+      href="./favicons/apple-icon-57x57.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="60x60"
+      href="./favicons/apple-icon-60x60.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="72x72"
+      href="./favicons/apple-icon-72x72.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="76x76"
+      href="./favicons/apple-icon-76x76.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="114x114"
+      href="./favicons/apple-icon-114x114.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="120x120"
+      href="./favicons/apple-icon-120x120.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="144x144"
+      href="./favicons/apple-icon-144x144.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="152x152"
+      href="./favicons/apple-icon-152x152.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="./favicons/apple-icon-180x180.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="192x192"
+      href="./favicons/android-icon-192x192.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="./favicons/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="96x96"
+      href="./favicons/favicon-96x96.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="./favicons/favicon-16x16.png"
+    />
+    <link rel="manifest" href="./favicons/manifest.json" />
+    <meta name="msapplication-TileColor" content="#ffffff" />
+    <meta
+      name="msapplication-TileImage"
+      content="./favicons/ms-icon-144x144.png"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
+  </head>
 
-<body>
-    <a 
+  <body>
+    <a
       href="https://github.com/atapas/html-tips-tricks"
-      target = "_blank"
-      rel="tag noopener noreferrer">
-      <img 
-        width="149" 
-        height="149" 
-        src="https://github.blog/wp-content/uploads/2008/12/forkme_left_green_007200.png?resize=149%2C149" 
-        class="attachment-full size-full" 
-        alt="Fork me on GitHub" 
-        data-recalc-dims="1">
+      target="_blank"
+      rel="tag noopener noreferrer"
+    >
+      <img
+        width="149"
+        height="149"
+        src="https://github.blog/wp-content/uploads/2008/12/forkme_left_green_007200.png?resize=149%2C149"
+        class="attachment-full size-full"
+        alt="Fork me on GitHub"
+        data-recalc-dims="1"
+      />
     </a>
     <div class="demo">
-        <h1>HTML5 Feature Tips</h1>
-        <img src="html5.png" alt="HTML5" style="height: 100px;width: 100px;">
-        <ul class="list">
-            <li>
-                <a href='./details/index.html'>
-                    Details Tag</a> - Specify details that the user can open and close on demand
-            </li>
-            <li>
-                <a href='./inputs/index.html'>
-                    Inputs</a> - Various useful tips
-            </li>
-            <li>
-                <a href='./content-editable/index.html'>
-                    Content Editable</a> - Make the content Editable
-            </li>
-            <li>
-                <a href='./mark/index.html'>
-                    Mark Content</a> - Highlight things
-            </li>
-            <li>
-                <a href='./data-attribute/index.html'>
-                    Custom Data</a> - Data with elements
-            </li>
-            <li>
-                <a href='./output/index.html'>
-                    Output Tag</a> - To perform a calculation and show the result
-            </li>
-            <li>
-                <a href='./datalist/index.html'>
-                    Datalist Tag</a> - Allows you to search and add elements
-            </li>
-            <li>
-                <a href='./range/index.html'>
-                    Range(Slider)</a> - Do you need a range slider?
-            </li>
-            <li>
-                <a href='./map/index.html'>
-                    Map</a> - Image map with coordinates
-            </li>
-            <li>
-                <a href='./meter/index.html'>
-                    Meter and Progress</a> - Display a gauge
-            </li>
-            <li>
-                <a href='./dialog/index.html'>
-                    Dialog</a> - Display a Modal Dialog
-            </li>
-            <li>
-                <a href='./lazy-loading/index.html'>
-                    Lazy Loading</a> - Lazy Load html images natively
-            </li>
-        </ul>
+      <h1>HTML5 Feature Tips</h1>
+      <img src="html5.png" alt="HTML5" style="height: 100px; width: 100px" />
+      <ul class="list">
+        <li>
+          <a href="./details/index.html"> Details Tag</a> - Specify details that
+          the user can open and close on demand
+        </li>
+        <li><a href="./inputs/index.html"> Inputs</a> - Various useful tips</li>
+        <li>
+          <a href="./content-editable/index.html"> Content Editable</a> - Make
+          the content Editable
+        </li>
+        <li>
+          <a href="./mark/index.html"> Mark Content</a> - Highlight things
+        </li>
+        <li>
+          <a href="./data-attribute/index.html"> Custom Data</a> - Data with
+          elements
+        </li>
+        <li>
+          <a href="./output/index.html"> Output Tag</a> - To perform a
+          calculation and show the result
+        </li>
+        <li>
+          <a href="./datalist/index.html"> Datalist Tag</a> - Allows you to
+          search and add elements
+        </li>
+        <li>
+          <a href="./range/index.html"> Range(Slider)</a> - Do you need a range
+          slider?
+        </li>
+        <li>
+          <a href="./map/index.html"> Map</a> - Image map with coordinates
+        </li>
+        <li>
+          <a href="./meter/index.html"> Meter and Progress</a> - Display a gauge
+        </li>
+        <li>
+          <a href="./dialog/index.html"> Dialog</a> - Display a Modal Dialog
+        </li>
+        <li>
+          <a href="./lazy-loading/index.html"> Lazy Loading</a> - Lazy Load html
+          images natively
+        </li>
+        <li>
+          <a href="./drag&drop"> Drag & Drop</a> - grab an Image and drag it to
+          a different location.
+        </li>
+      </ul>
     </div>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
