{"id":285,"date":"2024-05-21T10:22:12","date_gmt":"2024-05-21T08:22:12","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=285"},"modified":"2024-05-21T10:22:12","modified_gmt":"2024-05-21T08:22:12","slug":"66-api-drag-and-drop","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/66-api-drag-and-drop\/","title":{"rendered":"66. API Drag and Drop"},"content":{"rendered":"\n

En HTML, cualquier elemento se puede arrastrar y soltar.<\/p>\n\n\n\n

Drag and Drop<\/h2>\n\n\n\n

Drag and Drop<\/strong> es una caracter\u00edstica muy com\u00fan. Es cuando \u00abagarras\u00bb un objeto y lo arrastras a una ubicaci\u00f3n diferente.<\/p>\n\n\n\n

Ejm<\/h2>\n\n\n\n

El siguiente ejemplo es un ejemplo simple de arrastrar y soltar.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<!DOCTYPE HTML>\n<html>\n<head>\n<style>\n#div1 {\nwidth: 350px;\nheight: 70px;\npadding: 10px;\nborder: 1px solid #aaaaaa;\n}\n<\/style>\n<script>\nfunction allowDrop(ev) {\nev.preventDefault();\n}\n\nfunction drag(ev) {\nev.dataTransfer.setData(\"text\", ev.target.id);\n}\n\nfunction drop(ev) {\nev.preventDefault();\nvar data = ev.dataTransfer.getData(\"text\");\nev.target.appendChild(document.getElementById(data));\n}\n<\/script>\n<\/head>\n<body>\n\n<p>Drag the W3Schools image into the rectangle:<\/p>\n\n<div id=\"div1\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"><\/div>\n<br>\n<img id=\"drag1\" src=\"img_logo.gif\" draggable=\"true\" \nondragstart=\"drag(event)\" width=\"336\" height=\"69\">\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
Hacer que un elemento se pueda arrastrar<\/h2>\n\n\n\n
En primer lugar: para hacer que un elemento se pueda arrastrar, establece el atributo draggable<\/em> <\/strong>en true<\/em><\/strong>.<\/p>\n\n\n\n
<img draggable=\"true\"><\/pre>\n\n\n\n
Qu\u00e9 arrastrar: ondragstart y setData()<\/h2>\n\n\n\n
Luego, especifica lo que debe suceder cuando se arrastra el elemento.<\/p>\n\n\n\n
En el ejemplo anterior, el atributo ondragstart<\/em> <\/strong>llama a una funci\u00f3n, drag(event)<\/em><\/strong>, que especifica qu\u00e9 datos se arrastrar\u00e1n.<\/p>\n\n\n\n
El m\u00e9todo dataTransfer.setData()<\/em><\/strong> establece el tipo de datos y el valor de los datos arrastrados:<\/p>\n\n\n\n
function drag(ev) {\n  ev.dataTransfer.setData(\"text\", ev.target.id);\n}<\/pre>\n\n\n\n
En este caso, el tipo de datos es \u00abtexto\u00bb y el valor es el id del elemento arrastrable (\u00abdrag1\u00bb).<\/p>\n\n\n\n
D\u00f3nde caer – ondragover<\/h2>\n\n\n\n
El evento ondragover<\/em> <\/strong>especifica d\u00f3nde se pueden soltar los datos arrastrados.<\/p>\n\n\n\n
De forma predeterminada, los datos\/elementos no se pueden colocar en otros elementos. Para permitir una ca\u00edda, debemos evitar el manejo predeterminado del elemento.<\/p>\n\n\n\n
Esto se hace llamando al m\u00e9todo event.preventDefault()<\/em><\/strong> para el evento ondragover<\/em><\/strong>:<\/p>\n\n\n\n
event<\/em>.preventDefault()<\/pre>\n\n\n\n
ondrop<\/h2>\n\n\n\n
Cuando se sueltan los datos arrastrados, se produce un evento de soltar. En el ejemplo anterior, el atributo ondrop<\/em> <\/strong>llama a una funci\u00f3n, drop(event)<\/em><\/strong>:<\/p>\n\n\n\n
function drop(ev) {\n  ev.preventDefault();\n  var data = ev.dataTransfer.getData(\"text\");\n  ev.target.appendChild(document.getElementById(data));\n}<\/pre>\n\n\n\n
C\u00f3digo explicado<\/h2>\n\n\n\n
    \n
  • Llama a preventDefault()<\/em><\/strong> para evitar que el navegador maneje los datos de manera predeterminada (el valor predeterminado es abrir como enlace al soltar)<\/li>\n\n\n\n
  • Obt\u00e9n los datos arrastrados con el m\u00e9todo dataTransfer.getData()<\/em><\/strong>. Este m\u00e9todo devolver\u00e1 cualquier dato que se haya establecido en el mismo tipo en el m\u00e9todo setData()<\/em><\/strong><\/li>\n\n\n\n
  • Los datos arrastrados son la identificaci\u00f3n del elemento arrastrado (\u00abdrag1\u00bb)
    Agrega el elemento arrastrado al elemento soltado<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    En HTML, cualquier elemento se puede arrastrar y soltar. Drag and Drop Drag and Drop es una caracter\u00edstica muy com\u00fan. Es cuando…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":65,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-285","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En HTML, cualquier elemento se puede arrastrar y soltar. Drag and Drop Drag and Drop es una caracter\u00edstica muy com\u00fan. Es cuando...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/285","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=285"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/285\/revisions"}],"predecessor-version":[{"id":287,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/285\/revisions\/287"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}