Me encuentro trasteando con la librería Jquery-UI más concretamente con las funciones de Drag & Drop y me topé con un problemilla. Aparentemente esta no funciona en dispositivos móviles, con los touch events.
Buscando encontré otra librería que complementa a Jquery-UI (jQuery UI Touch Punch), añadiéndole los necesarios touch events. Hasta ahí el contexto.
Ahora me meteré con el problema que estoy tratando de solucionar. Lo que necesito es que se pueda hacer scroll sobre los elementos dragables sin que que con ello el elemento se llegue a "agarrar", para poder navegar por el listado de itemns.
A través de la opción delay
que tienen los elementos dragables, he conseguido que dichos elementos no reaccionen al dragado hasta pasado un segundo (para poder diferenciar entre si quiero "agarrarlo" o por el contrario lo que quiero es hacer scroll), pero lo que no consigo es la parte de hacer scroll pasando el dedo por estos elementos, ya que esta función queda deshabilitada.
¿Existe alguna opción de los elementos dragables que me permita conseguir lo que necesito? En caso negativo, ¿habría alguna manera de conseguir lo que necesito aunque pase por programarla a pelo?
$(function() {
$("#contenedor-articulos ul").sortable({
revert: true,
delay: 1000,
scroll: false,
stack: "#contenedor-grupo",
opacity: 0.35,
start: function(event, ui) {
//let elemento = ui.item;
},
stop: function (event, ui) {
//console.log('Se detiene');
}
});
$("#contenedor-grupos ul").sortable({
revert: true,
delay: 1000,
scroll: false,
stack: "#contenedor-articulos",
opacity: 0.35,
start: function(event, ui) {
//let elemento = ui.item;
},
stop: function (event, ui) {
//console.log('Se detiene');
}
});
$("#contenedor-grupos").droppable({
accept: "#contenedor-articulos li",
drop: function(event, ui) {
let elemento = ui.draggable;
let contenedor = $(this).find('ul');
elemento.removeAttr('style');
elemento.clone().appendTo(contenedor);
elemento.remove();
}
});
$("#contenedor-articulos").droppable({
accept: "#contenedor-grupos li",
drop: function(event, ui) {
let elemento = ui.draggable;
let contenedor = $(this).find('ul');
elemento.removeAttr('style');
elemento.clone().appendTo(contenedor);
elemento.remove();
}
});
});
.listado-articulos {
width: 200px;
padding: 2px;
}
.listado-articulos > li {
background-color: blue;
color: #fff;
border: 2px solid grey;
border-radius: 5px;
margin-bottom: 2px;
cursor: pointer;
padding: 5px;
list-style: none;
}
.grupo, #contenedor-articulos {
background-color: orange;
border: 2px solid grey;
border-radius: 5px;
width: 204px;
height: 300px;
}
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" crossorigin="anonymous">
</head>
<body>
<div id="main" class="container-fluid">
<div id="contenedor-titulo" class="row">
<h1>Prueba Drag and Drop</h1>
</div>
<div id="contenedor-aticulos-grupos" class="row">
<section id="seccion-listado-articulos" class="col-12 col-sm-4">
<h2>Artículos</h2>
<div id="contenedor-articulos">
<ul class="listado-articulos">
<li data-articulo="articulo-1">Artículo 1</li>
<li data-articulo="articulo-2">Artículo 2</li>
<li data-articulo="articulo-3">Artículo 3</li>
<li data-articulo="articulo-4">Artículo 4</li>
<li data-articulo="articulo-5">Artículo 5</li>
<li data-articulo="articulo-6">Artículo 6</li>
<li data-articulo="articulo-7">Artículo 7</li>
</ul>
</div>
</section>
<section id="seccion-grupos" class="col-12 col-sm-8">
<h2>Grupo</h2>
<div id="contenedor-grupos">
<div class="grupo">
<ul class="listado-articulos">
</ul>
</div>
</div>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
</body>
</html>