{"id":9353,"date":"2022-10-06T05:04:54","date_gmt":"2022-10-06T05:04:54","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=9353"},"modified":"2022-10-06T05:04:54","modified_gmt":"2022-10-06T05:04:54","slug":"html-draggable-attribute","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/10\/06\/html-draggable-attribute\/","title":{"rendered":"HTML draggable Attribute"},"content":{"rendered":"\n<p>The HTML&nbsp;draggable&nbsp;attribute is an enumerated attribute and specifies whether the element is draggable or not (either with native browser behavior or the HTML Drag and Drop API). This attribute is commonly used in the drag and drop operations.<\/p>\n\n\n\n<p>Images and links are draggable by default. For other elements, you must set the ondragstart event.<\/p>\n\n\n\n<p>You can use this attribute on any\u00a0HTML element. It is a part of the\u00a0Global Attributes.<\/p>\n\n\n\n<p>The&nbsp;draggable&nbsp;attribute can have the following values:<\/p>\n\n\n\n<ul><li>true: the element can be draggable.<\/li><li>false: the element cannot be draggable.<\/li><li>auto: drag is the default browser behavior.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"syntax-2\">Syntax<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;tag draggable=\"true|false|auto\"&gt;&lt;\/tag&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"example-of-the-html-span-class-attribute-draggable-span-attribute-4\">Example of the HTML&nbsp;draggable&nbsp;attribute:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE HTML&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Title of the document&lt;\/title&gt;\n    &lt;style&gt;\n      #rectId {\n        width: 350px;\n        height: 70px;\n        padding: 10px;\n        border: 1px solid #aaaaaa;\n      }\n    &lt;\/style&gt;\n    &lt;script&gt;\n      function allowDrop(event) {\n        event.preventDefault();\n      }\n      function drag(event) {\n        event.dataTransfer.setData(\"Text\", event.target.id);\n      }\n      function drop(event) {\n        var data = event.dataTransfer.getData(\"Text\");\n        event.target.appendChild(document.getElementById(data));\n        event.preventDefault();\n      }\n    &lt;\/script&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div id=\"rectId\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"&gt;&lt;\/div&gt;\n    &lt;br&gt;\n    &lt;p id=\"dragId\" draggable=\"true\" ondragstart=\"drag(event)\"&gt;\n      This is a draggable paragraph. Drag this item to the rectangle.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The HTML&nbsp;draggable&nbsp;attribute is an enumerated attribute and specifies whether the element is draggable or not (either with native browser behavior or the HTML Drag and Drop API). This attribute is commonly used in the drag and drop operations. Images and links are draggable by default. For other elements, you must set the ondragstart event. You [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[327],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9353"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=9353"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9353\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}