Skip to content

New Drag and Drop Features of HTML5 Added #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

New Drag and Drop Features of HTML5 Added #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions drag&drop/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
239 changes: 149 additions & 90 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
</body>
</html>