Drag y Drop<\/strong><\/em>.<\/p>\nDETECCI\u00d3N DE LA FUNCIONALIDAD<\/p>\n
Aunque la compatibilidad actual de los navegadores con esta API es bastante amplia, hay que tener en cuenta que los dispositivos m\u00f3viles no soportan esta funcionalidad. Si nuestro sitio web est\u00e1 siendo accedido desde un dispositivo m\u00f3vil, y tenemos implementada esta funcionalidad (por ejemplo en una cesta de la compra), debemos proveer otra soluci\u00f3n para que nuestro sitio web se comporte de manera correcta, y no perjudicar la experiencia del usuario.<\/p>\n
La manera mas sencilla de comprobar la disponibilidad de este API, es utilizar la biblioteca Modernizr, la cual nos indica si el navegador soporta esta funcionalidad:<\/p>\n
if (Modernizr.draganddrop)<\/p>\n
{\u00a0\u00a0\u00a0 \/\/ Browser supports HTML5 DnD.<\/p>\n
}<\/p>\n
else<\/p>\n
{\u00a0\u00a0\u00a0 \/\/ Fallback to a library solution or disable DnD.<\/p>\n
}<\/p>\n
CREACI\u00d3N DE CONTENIDO ARRASTRABLE<\/p>\n
Hacer que un elemento se pueda arrastrar es muy sencillo. Solo hay que establecer el atributo draggable=\u00bbtrue\u00bb en el elemento que se quiere mover. La funci\u00f3n de arrastre se puede habilitar pr\u00e1cticamente en cualquier elemento, incluidos archivos, im\u00e1genes,<\/p>\n
enlaces, listas u otros nodos DOM.<\/p>\n
<div id=\u00bbcolumns\u00bb><\/p>\n
<div class=\u00bbcolumn\u00bb draggable=\u00bbtrue\u00bb><\/p>\n
<header>A<\/header><\/p>\n
<\/div><\/p>\n
<div class=\u00bbcolumn\u00bb draggable=\u00bbtrue\u00bb><\/p>\n
<header>B<\/header><\/p>\n
<\/div><\/p>\n
<div class=\u00bbcolumn\u00bb draggable=\u00bbtrue\u00bb><\/p>\n
<header>C<\/header><\/p>\n
<\/div><\/p>\n
<\/div><\/p>\n
Una ayuda visual al usuario, para indicar que un elemento es arrastable, es transformar el aspecto tanto del elemento como del cursor. Con CSS esto es muy sencillo:<\/p>\n[draggable] {\u00a0\u00a0\u00a0 user-select: none; }<\/p>\n
.column:hover {\u00a0\u00a0\u00a0 border: 2px dotted #666666;\u00a0\u00a0\u00a0 background-color: #ccc;\u00a0\u00a0\u00a0 border-radius: 10px;\u00a0\u00a0\u00a0 box-shadow: inset 0 0 3px #000;\u00a0\u00a0\u00a0 cursor: move;Drag y Drop<\/strong><\/em><\/p>\n}<\/p>\n
La especificaci\u00f3n define hasta siete eventos que son lanzados tanto por los elementos de origen (los que son arrastrados) com para los elementos de destino (donde soltamos el elemento arrastrado)\u00a0Drag y Drop<\/strong><\/em>.<\/p>\nDrag y Drop<\/strong><\/em><\/span><\/p>\n#dropyDrag<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Drag y Drop DRAG AND DROP Durante a\u00f1os, hemos utilizado bibliotecas como\u00a0jQuery y Dojo para conseguir funcionalidades complejas en las interfaces de usuario como las animaciones, las esquinas redondeadas y la funci\u00f3n de arrastrar y soltar. Esta \u00faltima funcionalidad (Drag and Drop, DnD) tiene una gran importancia en HTML5, y de hecho se ha […]\n","protected":false},"author":2,"featured_media":5,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[478,477,8],"tags":[82,12,24,13,553,530],"class_list":["post-3736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-web","category-diseno-de-pagina","category-diseno-web","tag-diseno","tag-diseno-web","tag-diseno-web-df","tag-diseno-web-guadalajara","tag-drag-y-drop","tag-sitio-web"],"_links":{"self":[{"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts\/3736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/comments?post=3736"}],"version-history":[{"count":1,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts\/3736\/revisions"}],"predecessor-version":[{"id":3737,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts\/3736\/revisions\/3737"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/media\/5"}],"wp:attachment":[{"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/media?parent=3736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/categories?post=3736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/tags?post=3736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Drag](\"http:\/\/disenodepagina.com\/disenoweb\/wp-content\/uploads\/2017\/03\/about-web-design-studio-cardiff-300x97.jpg\")
<\/p>\n