<!DOCTYPE html>
<html>
<head>
<title>What is HTML Drag and Drop API | HTML Drag and Drop API</title>
<meta charset="UTF-8">
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Horje Com" />
<meta property="og:title" content="What is HTML Drag and Drop API | HTML Drag and Drop API" />
<meta name="description" content="In HTML, any element can be dragged and dropped. It is meantthat You can move the element from one place to another place.HTML Drag and Drop interfaces enable applicationsto use drag-and-drop features">
<meta property="og:description" content="In HTML, any element can be dragged and dropped. It is meantthat You can move the element from one place to another place.HTML Drag and Drop interfaces enable applicationsto use drag-and-drop features" /><meta property="og:url" content="https://horje.com/learn/591/what-is-html-drag-and-drop-api" />
<meta property="og:image" content="https://horje.com/uploads/images/2024-01-10-15-29-43-drop_drag.png" />
<meta property="twitter:title" content="What is HTML Drag and Drop API | HTML Drag and Drop API" />
<meta name="twitter:description" content="In HTML, any element can be dragged and dropped. It is meantthat You can move the element from one place to another place.HTML Drag and Drop interfaces enable applicationsto use drag-and-drop features" />
<meta name="twitter:image" content="https://horje.com/uploads/images/2024-01-10-15-29-43-drop_drag.png" />
<link rel="canonical" href="https://horje.com/learn/591/what-is-html-drag-and-drop-api" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://horje.com/style.css">
<link rel="stylesheet" href="https://horje.com/assets/css.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="apple-touch-icon" sizes="57x57" href="https://horje.com/assets/icon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://horje.com/assets/icon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://horje.com/assets/icon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://horje.com/assets/icon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://horje.com/assets/icon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://horje.com/assets/icon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://horje.com/assets/icon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://horje.com/assets/icon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://horje.com/assets/icon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://horje.com/assets/icon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://horje.com/assets/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://horje.com/assets/icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://horje.com/assets/icon/favicon-16x16.png">
<link rel="manifest" href="https://horje.com/assets/icon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="https://horje.com/assets/icon//ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7354467409736770"
crossorigin="anonymous"></script>
<script>
window.onload = function() {
var el = document.getElementById('target');
el.scrollIntoView(true);
}
</script>
<style>
.responsive {
width: 100%;
height: auto;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
input[type=password], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #66afe9;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: center;
}
button[type=submit]:hover {
background-color: #66afe9;
}
</style>
<style>
/* Style the list */
ul.breadcrumb {
padding: 10px 16px;
list-style: none;
background-color: #fff;
}
/* Display list items side by side */
ul.breadcrumb li {
display: inline;
font-size: 18px;
}
/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
/* Add a color to all links inside the list */
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}
/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}
</style>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/darkula.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<style>
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
<style>
.video-container {
position: relative;
padding-bottom: 56.25%;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=65a8ab841d58d50012137353&product=inline-share-buttons&source=platform" async="async"></script>
</head>
<body class="w3-light-grey">
<div class="w3-bar w3-top w3-green w3-large" style="z-index:4">
<button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey" onclick="w3_open();"><i class="fa fa-bars"></i> Menu</button>
<span class="w3-bar-item w3-left"><a href="https://horje.com" style="text-decoration: none"><FONT color=#ffffff face="Arial Black">Horje</FONT></a></span>
</div>
<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:250px;" id="mySidebar"><br>
<div class="w3-container w3-row">
<div class="w3-col s4">
<img src="https://horje.com/avatar.png" class="w3-circle w3-margin-right" style="width:46px">
</div>
<div class="w3-col s8 w3-bar">
Hi ! <br>
<span>Welcome, <strong>Guest</strong></span>
</div>
</div>
<hr>
<div class="w3-container">
</div>
<div class="w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu"><i class="fa fa-remove fa-fw"></i> Close Menu</a>
<a href="https://horje.com" class="w3-bar-item w3-button w3-padding"><i class="fa fa-home" style="font-size:22px;color:green"></i> Home</a>
<h5 style="text-align: center;">Web Tutorial</h5>
<a href="https://horje.com/learn/62/what-is-html-" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Introduction</a>
<a href="https://horje.com/learn/69/how-to-edit-html-code" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Editors</a>
<a href="https://horje.com/learn/75/how-to-create-html-documents" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Basic</a>
<a href="https://horje.com/learn/82/what-is-html-elements" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Elements</a>
<a href="https://horje.com/learn/87/what-is-html-attributes" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Attributes</a>
<a href="https://horje.com/learn/100/what-is-html-paragraphs" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Paragraphs</a>
<a href="https://horje.com/learn/106/what-is-html-styles" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Styles</a>
<a href="https://horje.com/learn/114/what-is-html-text-formatting" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Formatting</a>
<a href="https://horje.com/learn/126/what-is-html-quotations" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Quotations</a>
<a href="https://horje.com/learn/133/what-is-html-comments" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Comments</a>
<a href="https://horje.com/learn/139/what-is-html-colors" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Colors</a>
<a href="https://horje.com/learn/145/what-is-html-rgb-and-rgba-colors" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML RGB and RGBA Colors</a>
<a href="https://horje.com/learn/148/what-is-html-hex-colors" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML HEX Colors</a>
<a href="https://horje.com/learn/151/what-is-html-hsl-and-hsla-colors" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML HSL Colors</a>
<a href="https://horje.com/learn/157/what-is-html-css" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML CSS</a>
<a href="https://horje.com/learn/167/what-is-html-links" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Links</a>
<a href="https://horje.com/learn/175/what-is-html-links-color" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Links Color</a>
<a href="https://horje.com/learn/177/what-is-html-link-bookmarks" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Link Bookmark</a>
<a href="https://horje.com/learn/179/what-is-html-images" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Images</a>
<a href="https://horje.com/learn/190/what-is-html-image-maps" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Image Maps</a>
<a href="https://horje.com/learn/196/what-is-html-background-images" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Background Images</a>
<a href="https://horje.com/learn/204/what-is-html-picture-element" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML picture Element</a>
<a href="https://horje.com/learn/206/what-is-html-favicon" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Favicon</a>
<a href="https://horje.com/learn/208/what-is-html-page-title" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Page Title</a>
<a href="https://horje.com/learn/210/what-is-html-tables" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Tables</a>
<a href="https://horje.com/learn/215/what-is-html-table-borders" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Table Borders</a>
<a href="https://horje.com/learn/222/what-is-html-table-sizes" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Table Sizes</a>
<a href="https://horje.com/learn/226/what-is-html-table-headers" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Table Headers</a>
<a href="https://horje.com/learn/232/what-is-html-table-padding" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Table Padding and Spacing</a>
<a href="https://horje.com/learn/236/what-is-html-table-colspan" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Table Colspan and Rowspan</a>
<a href="https://horje.com/learn/240/what-is-html-table-styling" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Table Styling</a>
<a href="https://horje.com/learn/246/what-is-html-table-colgroup" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Table Colgroup</a>
<a href="https://horje.com/learn/250/what-is-html-lists" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Lists</a>
<a href="https://horje.com/learn/265/what-is-html-block-and-inline-elements" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Block and Inline Elements</a>
<a href="https://horje.com/learn/270/what-is-html-class-attribute" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML class Attribute</a>
<a href="https://horje.com/learn/276/what-is-html-id-attribute" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML id Attribute</a>
<a href="https://horje.com/learn/281/what-is-html-iframes" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Iframes</a>
<a href="https://horje.com/learn/285/what-is-html-javascript" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML JavaScript</a>
<a href="https://horje.com/learn/289/what-is-html-file-paths" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML File Paths</a>
<a href="https://horje.com/learn/293/what-is-html-the-head-element" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML - The Head Element</a>
<a href="https://horje.com/learn/303/what-is-html-layout" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Layout</a>
<a href="https://horje.com/learn/310/what-is-html-responsive" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Responsive</a>
<a href="https://horje.com/learn/319/what-is-html-computer-code" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Computer Code</a>
<a href="https://horje.com/learn/325/what-is-html-semantic" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Semantic</a>
<a href="https://horje.com/learn/336/what-is-html-style-guide" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Style Guide</a>
<a href="https://horje.com/learn//" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Button</a>
<a href="https://horje.com/learn/369/what-is-html-entities" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Entities</a>
<a href="https://horje.com/learn/377/what-is-html-symbols" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Symbols</a>
<a href="https://horje.com/learn//" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Language</a>
<a href="https://horje.com/learn/384/what-is-emojis-in-html" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Emojis</a>
<a href="https://horje.com/learn/388/what-is-html-encoding-character-sets-" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Charsets</a>
<a href="https://horje.com/learn/394/what-is-html-uniform-resource-locators" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML URL Encode</a>
<a href="https://horje.com/learn/399/what-is-html-versus-xhtml" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML vs. XHTML</a>
<a href="https://horje.com/learn/412/what-is-html-forms" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Forms</a>
<a href="https://horje.com/learn/447/how-to-create-html-action-attribute" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Form Attributes</a>
<a href="https://horje.com/learn/452/what-is-html-form-elements" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Form Elements</a>
<a href="https://horje.com/learn/470/what-is-html-input-types" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Input Types</a>
<a href="https://horje.com/learn/499/what-is-html-input-attributes" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Input Attributes</a>
<a href="https://horje.com/learn/527/what-is-html-canvas-" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Canvas Graphics</a>
<a href="https://horje.com/learn/535/what-is-html-svg-graphics" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML SVG Graphics</a>
<a href="https://horje.com/learn/542/what-is-html-multimedia" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Multimedia</a>
<a href="https://horje.com/learn/545/what-is-html-video" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Video</a>
<a href="https://horje.com/learn/553/what-is-html-audio" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Audio</a>
<a href="https://horje.com/learn/564/what-is-html-plug-ins" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Plug-ins</a>
<a href="https://horje.com/learn/573/what-is-html-youtube-videos" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML YouTube Videos</a>
<a href="https://horje.com/learn/583/what-is-html-geolocation-api" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Geolocation API</a>
<a href="https://horje.com/learn/591/what-is-html-drag-and-drop-api" class="w3-bar-item w3-button w3-padding w3-blue" ><i class="fa fa-code"></i> HTML Drag and Drop API</a>
<a href="/learn/591/what-is-html-drag-and-drop-api" id="target" class="w3-bar-item w3-button w3-padding w3-sand" > <h10><i class="fa fa-file-text-o" style="font-size:12px;color:green"></i> What is HTML Drag and Drop API</h10></a>
<a href="/learn/592/what-browsers-will-support-html-drag-and-drop" class="w3-bar-item w3-button w3-padding" > <h10><i class="fa fa-file-text-o" style="font-size:12px"></i> What browsers will support HTML Drag and Drop</h10></a>
<a href="/learn/593/how-to-create-html-drag-and-drop-example" class="w3-bar-item w3-button w3-padding" > <h10><i class="fa fa-file-text-o" style="font-size:12px"></i> How to create HTML Drag and Drop Example</h10></a>
<a href="/learn/594/how-to-make-an-element-draggable" class="w3-bar-item w3-button w3-padding" > <h10><i class="fa fa-file-text-o" style="font-size:12px"></i> How to Make an Element Draggable</h10></a>
<a href="/learn/595/what-to-drag-ondragstart-and-setdata-" class="w3-bar-item w3-button w3-padding" > <h10><i class="fa fa-file-text-o" style="font-size:12px"></i> What to Drag - ondragstart and setData()</h10></a>
<a href="/learn/596/where-to-drop-ondragover" class="w3-bar-item w3-button w3-padding" > <h10><i class="fa fa-file-text-o" style="font-size:12px"></i> Where to Drop - ondragover</h10></a>
<a href="/learn/597/how-to-do-the-drop-ondrop" class="w3-bar-item w3-button w3-padding" > <h10><i class="fa fa-file-text-o" style="font-size:12px"></i> How to Do the Drop - ondrop</h10></a>
<a href="/learn/598/how-to-drag-and-drop-an-image-from-left-to-right" class="w3-bar-item w3-button w3-padding" > <h10><i class="fa fa-file-text-o" style="font-size:12px"></i> How to drag and drop an image from left to right</h10></a>
<a href="https://horje.com/learn/599/what-is-html-web-storage-api" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Web Storage API</a>
<a href="https://horje.com/learn/605/what-is-html-web-workers-api" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Web Workers API</a>
<a href="https://horje.com/learn/615/what-is-html-sse-api" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML SSE API</a>
<a href="https://horje.com/learn//" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML by Alphabet</a>
<a href="https://horje.com/learn/622/what-is-html-tag" class="w3-bar-item w3-button w3-padding" ><i class="fa fa-code"></i> HTML Tag</a>
</div><br/>
<br><br>
</div>
</nav>
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<div class="w3-main" style="margin-left:250px;margin-top:43px;">
<header class="w3-container" style="padding-top:22px">
<form class="example" action="https://horje.com/search.php">
<input type="text" placeholder="Search" name="q">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
<ul class="breadcrumb"> <i class="fa fa-code" style="color:blue"></i>
<li><a href="https://horje.com">Home</a></li>
<li><a href="https://horje.com/category/31/web-tutorial">Web Tutorial</a></li>
<li><a href="https://horje.com/sub/31/194/full-course">Full Course</a></li>
<li><a href="https://horje.com/sub/31/195/english-tutorial">English Tutorial</a></li>
<li><a href="https://horje.com/sub/31/196/html">HTML</a></li><li><a href="https://horje.com/sub/31/311/html-drag-and-drop-api">HTML Drag and Drop API</a></li> <li>What is HTML Drag and Drop API</li>
</ul>
<TABLE class="w3-table w3-striped w3-bordered w3-border w3-white">
<TBODY>
<tr>
<td>
<img src="https://horje.com/uploads/images/2024-01-10-15-29-43-drop_drag.png" onerror=this.src="https://horje.com/banner.jpg" alt="What is HTML Drag and Drop API">
</td>
</tr>
</TBODY></TABLE></TABLE>
<TABLE class="w3-table w3-striped w3-bordered w3-border w3-white">
<TBODY>
<tr>
<td>
<p>In HTML, any element can be dragged and dropped.</p>
<p>It is meant that You can move the element from one place to another place.</p>
<p><strong>HTML Drag and Drop</strong> interfaces enable applications to use drag-and-drop features in browsers.</p>
<p>The user may select <em>draggable</em> elements with a mouse, drag those elements to a <em>droppable</em> element, and drop them by releasing the mouse button. A translucent representation of the <em>draggable</em> elements follows the pointer during the drag operation.</p>
<p>You can customize which elements can become <em>draggable</em>, the type of feedback the <em>draggable</em> elements produce, and the <em>droppable</em> elements.</p>
<p>This overview of HTML Drag and Drop includes a description of the interfaces, basic steps to add drag-and-drop support to an application, and an interoperability summary of the interfaces.</p>
</td>
</tr>
</TBODY></TABLE></br>
<h3><font style="color:green;"><span></span></font></h3>
<TABLE class="w3-table w3-striped w3-bordered w3-border w3-white">
<TBODY>
</TBODY></TABLE>
<hr><span style="float: right"><a href="https://horje.com/learn/592/what-browsers-will-support-html-drag-and-drop"><button class="w3-button w3-blue w3-round">Next <i class="fa fa-angle-right"></i></button></a></span><span style="float: left"><a href="https://horje.com/learn/590/how-to-create-html-geolocation-object-other-interesting-methods"><button class="w3-button w3-blue w3-round"><i class="fa fa-angle-left"></i> Previous</button></a></span></br><hr>
</br>
<TABLE class="w3-table w3-striped w3-bordered w3-border w3-white">
<header class="w3-container">
<h5><b><i class="fa fa-list-alt" style="color:blue"></i> Related Articles</b></h5>
</header>
<tr><td><i class="fa fa-code" style="color:blue"></i> <span class="action_links"><a style="text-decoration:none" class="act" href="/learn/591/what-is-html-drag-and-drop-api"><font style="color:green;">What is HTML Drag and Drop API<font></a></td>
<td>HTML Drag and Drop API</td></tr><tr><td><i class="fa fa-code" style="color:blue"></i> <span class="action_links"><a style="text-decoration:none" class="act" href="/learn/592/what-browsers-will-support-html-drag-and-drop"><font style="color:green;">What browsers will support HTML Drag and Drop<font></a></td>
<td>HTML Drag and Drop API</td></tr><tr><td><i class="fa fa-code" style="color:blue"></i> <span class="action_links"><a style="text-decoration:none" class="act" href="/learn/593/how-to-create-html-drag-and-drop-example"><font style="color:green;">How to create HTML Drag and Drop Example<font></a></td>
<td>HTML Drag and Drop API</td></tr><tr><td><i class="fa fa-code" style="color:blue"></i> <span class="action_links"><a style="text-decoration:none" class="act" href="/learn/594/how-to-make-an-element-draggable"><font style="color:green;">How to Make an Element Draggable<font></a></td>
<td>HTML Drag and Drop API</td></tr><tr><td><i class="fa fa-code" style="color:blue"></i> <span class="action_links"><a style="text-decoration:none" class="act" href="/learn/595/what-to-drag-ondragstart-and-setdata-"><font style="color:green;">What to Drag - ondragstart and setData()<font></a></td>
<td>HTML Drag and Drop API</td></tr><tr><td><i class="fa fa-code" style="color:blue"></i> <span class="action_links"><a style="text-decoration:none" class="act" href="/learn/596/where-to-drop-ondragover"><font style="color:green;">Where to Drop - ondragover<font></a></td>
<td>HTML Drag and Drop API</td></tr><tr><td><i class="fa fa-code" style="color:blue"></i> <span class="action_links"><a style="text-decoration:none" class="act" href="/learn/597/how-to-do-the-drop-ondrop"><font style="color:green;">How to Do the Drop - ondrop<font></a></td>
<td>HTML Drag and Drop API</td></tr><tr><td><i class="fa fa-code" style="color:blue"></i> <span class="action_links"><a style="text-decoration:none" class="act" href="/learn/598/how-to-drag-and-drop-an-image-from-left-to-right"><font style="color:green;">How to drag and drop an image from left to right<font></a></td>
<td>HTML Drag and Drop API</td></tr></table></br></br>
<TABLE class="w3-table w3-striped w3-bordered w3-border w3-white">
<TBODY>
<tr><td><div class="list"><b>Read Full</b>:</td> <td><a href="https://horje.com/read/311/html-drag-and-drop-api">HTML Drag and Drop API</a></div></td></tr>
<tr><td><div class="list"><b>Category</b>:</td> <td>Web Tutorial</div></td></tr><tr><td><div class="list"><b>Sub Category</b>:</td> <td>HTML Drag and Drop API</div></td></tr><tr><td><div class="list"><b>Uploaded</b>:</td> <td>8 months ago</div></td></tr><tr><td><div class="list"><b>Uploaded by</b>:</td> <td>Admin</a></div></td></tr>
<tr><td><div class="list"><b>Views</b>:</td> <td>4</div></td></tr>
<tr><td><div class="list"><b>Ref on</b>:</td> <td><span class="action_links"><a rel="nofollow" style="text-decoration:none" class="act" href="https://www.w3schools.com/html/html5_draganddrop.asp" target="_blank"><font style="color:green;">View<font></font></a></span></div></td></tr>
</TBODY></TABLE>
</br>
<TABLE class="w3-table w3-striped w3-bordered w3-border w3-white">
<TBODY>
<tr><td><div class="list"><b><font style="color:red;">Edit</font></b>:</td>
<td><a href="https://horje.com/add/delete_post.php?id=591">Delete</a> - <a href="https://horje.com/add/edit.php?id=591">Edit</a> - <a href="https://horje.com/admin/post/gallery/591">Add Galary</a> - <a href="https://horje.com/admin/post/data/591">Single</a> - <a href="https://horje.com/admin/add-data/591">Multi</a></td>
</tr>
</TBODY></TABLE>
<hr>
</br>
<div class="w3-panel w3-card w3-green""><p>You have Successfully logged in!. <a href="https://horje.com/admin/logout.php" style="color: red">Logout</a> - <a href="https://horje.com/admin" style="color: black">Admin Panel</a></p></div>
<center>
<h1>Share on:</h1>
<b>
<div class="sharethis-inline-share-buttons"></div>
</center>
<div class="footer"><footer class="w3-container w3-padding-16 w3-light-grey">
<P> </P>
<p>Horje © 2011 to 2024</p>
</footer>
</div>
<script>
// Get the Sidebar
var mySidebar = document.getElementById("mySidebar");
// Get the DIV with overlay effect
var overlayBg = document.getElementById("myOverlay");
// Toggle between showing and hiding the sidebar, and add overlay effect
function w3_open() {
if (mySidebar.style.display === 'block') {
mySidebar.style.display = 'none';
overlayBg.style.display = "none";
} else {
mySidebar.style.display = 'block';
overlayBg.style.display = "block";
}
}
// Close the sidebar with the close button
function w3_close() {
mySidebar.style.display = "none";
overlayBg.style.display = "none";
}
</script>
</body>
</html>