Con HTML5 se han incorporado muchas características que mejoran la usabilidad al momento de interactuar con un sitio web, como son el autocompletado, validaciones y el permitirnos usar dispositivos móviles de manera simple y similar a como si lo estuviéramos haciendo desde un navegador en la computadora.
Los navegadores modernos (Chrome, Firefox, Opera, entre otros) han ido incorporando las funcionalidades de HTML5 de a poco, por lo que hasta ahora tenemos que hacer uso de liberías adicionales como Modernizr para validar que alguna funcionalidad esté soportada por nuestro navegador, o la otra opción, que la funcionalidad no disponible se emule de alguna forma usando en la mayoría de los casos JavaScript y CSS.
Una de las características liberadas en la especificación de HTML5 es la de drag and drop de manera nativa de elementos en pantalla, sin en cambio, dicha funcionalidad (al menos en el momento en que escribimos este post) no está soportada de manera nativa para dispositivos móviles; por lo que dicha funcionalidad tiene que ser emulada para lograr dicho objetivo.
En el siguiente video mostraremos como se llevó a cabo dicha emulación para posteriormente incluír el código javascript utilizado y explicado de la manera más detallada posible, para que al final del post, puedas descargar un zip con el código para que lo manipules y adaptes a tus necesidades.
Nuestro código:
index.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Ejemplo Drag and Drop de Imágenes Para Dispositivos Móviles</title>
<link href="Content/estilos.css" rel="stylesheet" />
<meta charset="utf-8" />
</head>
<body>
<!--Imagen auxiliar para simular el dragging en dispositivos móviles-->
<img id="auxiliar" />
<div class="contenedor" id="contenedor1">
<img id="img" class="draggable" src="images/example.jpg" />
</div><br />
<div class="contenedor" id="contenedor2"></div><br />
<div class="contenedor" id="contenedor3"></div>
</body>
</html>
<script src="Scripts/jquery-3.1.1.min.js"></script>
<script src="Scripts/draganddrop.js"></script>
estilos.css
.contenedor {
width: 100%;
height: 200px;
border: solid 1px black;
}
img {
margin: 5px;
}
draganddrop.js
$(function () {
///// Funciones drag and drop para PC
$('.contenedor').on('dragover', function (ev) {
ev.preventDefault();
});
$('.draggable').on('dragstart', function (ev) {
ev.originalEvent.dataTransfer.setData("text", ev.target.id);
});
$('.contenedor').on('drop', function (ev) {
ev.preventDefault();
var data = ev.originalEvent.dataTransfer.getData("text");
$('#' + data).appendTo($(ev.target));
});
///// Funciones drag and drop (de imágenes) para dispositivo móvil
// Se oculta la imagen del DOM
$('#auxiliar').hide();
var timer;
// Tiempo mínimo del touch sostenido para considerarse como un arrastre
var touchDuration = 500;
// Indicador de drag and drop en dispositivos móviles
var dragMobile = false;
// Elemento que está siendo arrastrado
var element;
// Inicio del arrastre
$('.draggable').on('touchstart', function (ev) {
// Se captura el elemento sobre el que se inicia el evento touch
element = this;
timer = setTimeout(function () {
// Se asigna el elemento src a la imagen auxiliar
$('#auxiliar').attr('src', $(element).attr('src'));
// Se indica que se ha iniciado el dragging en dispositivo móvil
dragMobile = true;
}, touchDuration);
ev.preventDefault();
});
// Lo que sucede durante el arrastre
$('.draggable').on('touchmove', function (ev) {
// Obtiene las coordenadas del touching
var touch = ev.originalEvent.touches["0"];
// Valida si se ha iniciado un arrastre en dispositivo móvil
if (dragMobile) {
// Se modifica la posición de la imagen auxiliar con opacidad al 80%
// que sigue el movimiento del dedo a lo largo de la pantalla
$('#auxiliar').css({
top: touch.pageY - 100,
left: touch.pageX - 100,
opacity: 0.8,
display: 'block',
position: 'absolute'
});
}
});
// Lo que sucede cuando se finaliza el arrastre
$('.draggable').on('touchend', function (ev) {
// Se reinicia el timer que controla el tiempo mínimo que debe transcurrir
// para considerarse un arrastre en dispositivo móvil
if (timer) {
clearTimeout(timer);
}
// Se valida que se haya capturado el elemento arrastrado
if (element) {
// Se valida que el elemento sea arrastrable y que se haya iniciado
if (dragMobile) {
ev.preventDefault();
ev.stopPropagation();
// Se oculta la imagen auxiliar de arrastre
$('#auxiliar').hide();
var changedTouch = event.changedTouches[0];
// Obtiene el elemento sobre el que se finaliza el evento touch
var elem = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
// Se valida que el elemento contenga la clase contenedor
// es requisito para permitir el soltar el elemento que posea esta clase
if ($(elem).hasClass('contenedor')) {
// Agrega el elemento arrastrado al elemento donde finaliza el evento touch
$(element).appendTo('#' + elem.id);
}
// Se pone en falso la bandera que indica que se ha finalizado el evento
// drag and drop en mobile
dragMobile = false;
}
}
});
});
Esperemos que el video y el código sea suficiente para su entendimiento, cualquier duda no dudes en dejarnos un comentario.
Descarga el código de ejemplo aquí...
Los navegadores modernos (Chrome, Firefox, Opera, entre otros) han ido incorporando las funcionalidades de HTML5 de a poco, por lo que hasta ahora tenemos que hacer uso de liberías adicionales como Modernizr para validar que alguna funcionalidad esté soportada por nuestro navegador, o la otra opción, que la funcionalidad no disponible se emule de alguna forma usando en la mayoría de los casos JavaScript y CSS.
Una de las características liberadas en la especificación de HTML5 es la de drag and drop de manera nativa de elementos en pantalla, sin en cambio, dicha funcionalidad (al menos en el momento en que escribimos este post) no está soportada de manera nativa para dispositivos móviles; por lo que dicha funcionalidad tiene que ser emulada para lograr dicho objetivo.
En el siguiente video mostraremos como se llevó a cabo dicha emulación para posteriormente incluír el código javascript utilizado y explicado de la manera más detallada posible, para que al final del post, puedas descargar un zip con el código para que lo manipules y adaptes a tus necesidades.
index.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Ejemplo Drag and Drop de Imágenes Para Dispositivos Móviles</title>
<link href="Content/estilos.css" rel="stylesheet" />
<meta charset="utf-8" />
</head>
<body>
<!--Imagen auxiliar para simular el dragging en dispositivos móviles-->
<img id="auxiliar" />
<div class="contenedor" id="contenedor1">
<img id="img" class="draggable" src="images/example.jpg" />
</div><br />
<div class="contenedor" id="contenedor2"></div><br />
<div class="contenedor" id="contenedor3"></div>
</body>
</html>
<script src="Scripts/jquery-3.1.1.min.js"></script>
<script src="Scripts/draganddrop.js"></script>
estilos.css
.contenedor {
width: 100%;
height: 200px;
border: solid 1px black;
}
img {
margin: 5px;
}
draganddrop.js
$(function () {
///// Funciones drag and drop para PC
$('.contenedor').on('dragover', function (ev) {
ev.preventDefault();
});
$('.draggable').on('dragstart', function (ev) {
ev.originalEvent.dataTransfer.setData("text", ev.target.id);
});
$('.contenedor').on('drop', function (ev) {
ev.preventDefault();
var data = ev.originalEvent.dataTransfer.getData("text");
$('#' + data).appendTo($(ev.target));
});
///// Funciones drag and drop (de imágenes) para dispositivo móvil
// Se oculta la imagen del DOM
$('#auxiliar').hide();
var timer;
// Tiempo mínimo del touch sostenido para considerarse como un arrastre
var touchDuration = 500;
// Indicador de drag and drop en dispositivos móviles
var dragMobile = false;
// Elemento que está siendo arrastrado
var element;
// Inicio del arrastre
$('.draggable').on('touchstart', function (ev) {
// Se captura el elemento sobre el que se inicia el evento touch
element = this;
timer = setTimeout(function () {
// Se asigna el elemento src a la imagen auxiliar
$('#auxiliar').attr('src', $(element).attr('src'));
// Se indica que se ha iniciado el dragging en dispositivo móvil
dragMobile = true;
}, touchDuration);
ev.preventDefault();
});
// Lo que sucede durante el arrastre
$('.draggable').on('touchmove', function (ev) {
// Obtiene las coordenadas del touching
var touch = ev.originalEvent.touches["0"];
// Valida si se ha iniciado un arrastre en dispositivo móvil
if (dragMobile) {
// Se modifica la posición de la imagen auxiliar con opacidad al 80%
// que sigue el movimiento del dedo a lo largo de la pantalla
$('#auxiliar').css({
top: touch.pageY - 100,
left: touch.pageX - 100,
opacity: 0.8,
display: 'block',
position: 'absolute'
});
}
});
// Lo que sucede cuando se finaliza el arrastre
$('.draggable').on('touchend', function (ev) {
// Se reinicia el timer que controla el tiempo mínimo que debe transcurrir
// para considerarse un arrastre en dispositivo móvil
if (timer) {
clearTimeout(timer);
}
// Se valida que se haya capturado el elemento arrastrado
if (element) {
// Se valida que el elemento sea arrastrable y que se haya iniciado
if (dragMobile) {
ev.preventDefault();
ev.stopPropagation();
// Se oculta la imagen auxiliar de arrastre
$('#auxiliar').hide();
var changedTouch = event.changedTouches[0];
// Obtiene el elemento sobre el que se finaliza el evento touch
var elem = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
// Se valida que el elemento contenga la clase contenedor
// es requisito para permitir el soltar el elemento que posea esta clase
if ($(elem).hasClass('contenedor')) {
// Agrega el elemento arrastrado al elemento donde finaliza el evento touch
$(element).appendTo('#' + elem.id);
}
// Se pone en falso la bandera que indica que se ha finalizado el evento
// drag and drop en mobile
dragMobile = false;
}
}
});
});
Esperemos que el video y el código sea suficiente para su entendimiento, cualquier duda no dudes en dejarnos un comentario.
Descarga el código de ejemplo aquí...
Comentarios
Publicar un comentario