Tema para preguntas random a Chatgpt 🤖

  • Autor Autor Carlos Arreola
  • Fecha de inicio Fecha de inicio
blankito1998 dijo:
porque tengo que soltar el click y volver a dar click para que se mueva?
Hacer clic para expandir...
Este comportamiento se debe a que la función draggable se está habilitando después de que se mantiene presionado el botón del ratón durante 5 segundos. En ese momento, la acción de "agarrar" el div ya se completó, por lo que es necesario liberar y luego hacer clic y mantener presionado nuevamente para iniciar la acción de arrastrar.

Una solución para evitar tener que hacer clic nuevamente después de los 5 segundos es iniciar la acción de arrastrar automáticamente después de que pase ese tiempo. Sin embargo, esto no es posible directamente con la función draggable de jQuery UI.

Una alternativa viable sería usar una librería adicional como interact.js, que admite la interacción de arrastrar después de un retardo de tiempo. Sin embargo, integrar esta librería requeriría modificaciones adicionales en tu código y posiblemente en la estructura de tu aplicación.

Lamentablemente, la acción específica que estás buscando - iniciar el arrastre después de mantener presionado durante un cierto tiempo -, no es soportada de manera nativa por la mayoría de las librerías de arrastrar y soltar debido a cuestiones de usabilidad y accesibilidad. Por lo general, se prefiere que la acción de arrastrar comience inmediatamente al hacer clic y mantener presionado, para proporcionar una retroalimentación instantánea al usuario sobre su acción.
 
esto funciona para tlf o hay que agregar algo?
 
blankito1998 dijo:
esto funciona para tlf o hay que agregar algo?
Hacer clic para expandir...
El código proporcionado está diseñado principalmente para un ambiente de escritorio, ya que eventos como "mousemove" y "keydown" no son aplicables en un dispositivo móvil.

Para hacer que funcione en un móvil, tendrías que incorporar eventos táctiles. Los equivalentes móviles más comunes para "mousemove" son "touchmove", y para "keydown" podrías usar "touchstart". Aquí está cómo se vería:

JavaScript: 
let tiempoDeInactividad;
window.onload = temporizadorDeInactividad;

function temporizadorDeInactividad() {
    if (tiempoDeInactividad) clearTimeout(tiempoDeInactividad);
    tiempoDeInactividad = setTimeout(funcionDeInactividad, 10000);
}

function funcionDeInactividad() {
    console.log("El usuario ha estado inactivo durante 10 segundos");
}

// Eventos de escritorio
window.onmousemove = temporizadorDeInactividad;
window.onkeydown = temporizadorDeInactividad;
window.onscroll = temporizadorDeInactividad;

// Eventos de móvil
window.ontouchstart = temporizadorDeInactividad;
window.ontouchmove = temporizadorDeInactividad;

Con este código, tu función de inactividad debería funcionar tanto en dispositivos de escritorio como móviles. Nota que para considerar la inactividad en un formulario, debes considerar eventos adicionales como "change" y "input" para los elementos de formulario.
 
tengo una duda, porque aqui no me funciona en tlf?
 
BotBeta dijo:
Sorry I couldn't contact the ChatGPT think tank 🙁
Hacer clic para expandir...
<div id="miDiv">Arrástrame</div>

<script>
$( function() {
var start_y; // posición Y inicial
var height = $(window).height(); // altura de la ventana

$( "#miDiv" ).draggable({
start: function(event) {
start_y = event.pageY; // registra posición Y inicial
},
drag: function(event) {
// calcula la distancia arrastrada como porcentaje de la altura de la ventana
var drag_distance = Math.abs(event.pageY - start_y) / height * 100;

// si se ha arrastrado al menos el 50%, oculta el div
if (drag_distance >= 50) {
$(this).hide("slow");
}
}
});
} );
</script>

<style>
#miDiv {
width: 100px;
height: 100px;
background: #ccc;
cursor: move;
}
</style>
porque no me funciona en tlf?
 
El problema es que el evento "draggable" que estás usando de jQuery UI no es compatible con eventos táctiles, que son los que se usan en dispositivos móviles. jQuery UI fue desarrollada antes de que los dispositivos móviles fueran tan populares como lo son ahora y, por lo tanto, no se diseñó para manejar eventos táctiles.

Una solución podría ser usar una biblioteca de JavaScript diferente que sea compatible con eventos táctiles, o agregar un polyfill como jQuery UI Touch Punch que extiende la compatibilidad de jQuery UI a dispositivos táctiles.

Aquí te dejo cómo se podría ver tu código incorporando jQuery UI Touch Punch:

HTML: 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="http://touchpunch.furf.com/content/jquery.ui.touch-punch.min.js"></script>
  <style>
    #miDiv {
      width: 100px;
      height: 100px;
      background: #ccc;
    }
  </style> 
</head>
<body>

<div id="miDiv">Arrástrame</div>

<script>
$( function() {
    var start_y;
    var height = $(window).height();
    
    $( "#miDiv" ).draggable({
      start: function(event) {
        start_y = event.pageY;
      },
      drag: function(event) {                   
        var drag_distance = Math.abs(event.pageY - start_y) / height * 100;
        if (drag_distance >= 50) {
          $(this).hide("slow");
        }
      }
    });
} );
</script>

</body>
</html>

Recuerda que debes alojar el archivo "jquery.ui.touch-punch.min.js" en tu propio servidor en lugar de usar el enlace directo, ya que el sitio Touch Punch no está pensado para alojar archivos para sitios en producción.
 
donde descargo este archivo? jquery.ui.touch-punch.min.js
 
como alojo ese archivo en mi web?
 
lo probe y sigue sin funcionarme
 
BotBeta dijo:
Sorry I couldn't contact the ChatGPT think tank 🙁
Hacer clic para expandir...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://touchpunch.furf.com/content/jquery.ui.touch-punch.min.js"></script>
<style>
#miDiv {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
</head>
<body>

<div id="miDiv">Arrástrame</div>

<script>
$( function() {
var start_y;
var height = $(window).height();

$( "#miDiv" ).draggable({
start: function(event) {
start_y = event.pageY;
},
drag: function(event) {
var drag_distance = Math.abs(event.pageY - start_y) / height * 100;
if (drag_distance >= 50) {
$(this).hide("slow");
}
}
});
} );
</script>

</body>
</html>
porque no me funciona?
 
Probablemente el código no esté funcionando debido a los corchetes en los enlaces a los scripts en tu...iendo que tu código se ejecute correctamente.
 
como hago para que este codigo nada mas se pueda mover hacia arriba y abajo?
 
blankito1998 dijo:
como hago para que este codigo nada mas se pueda mover hacia arriba y abajo?
Hacer clic para expandir...
Para restringir el movimiento a únicamente vertical (arriba y abajo), puedes agregar la opción "axis" al método draggable y establecerla como 'y'. Aquí te dejo cómo se haría:

HTML: 
<script>
$( function() {
    var start_y;
    var height = $(window).height();
    
    $( "#miDiv" ).draggable({
      axis: 'y', // Restringe el movimiento al eje Y
      start: function(event) {
        start_y = event.pageY;
      },
      drag: function(event) {  
        var drag_distance = Math.abs(event.pageY - start_y) / height * 100;
        if (drag_distance >= 50) {
          $(this).hide("slow");
        }
      }
    });
} );
</script>

Espero que esto te ayude!
 
esta bien, y como hago para que al soltar el div vuelva a su lugar?
 
blankito1998 dijo:
esta bien, y como hago para que al soltar el div vuelva a su lugar?
Hacer clic para expandir...
Para hacer que el div regrese a su lugar original cuando se suelta, puedes agregar la opción "revert" al método draggable. Aquí está el código:

HTML: 
<script>
$( function() {
    var start_y;
    var height = $(window).height();
   
    $( "#miDiv" ).draggable({
      axis: 'y', // Restringe el movimiento al eje Y
      revert: true, // Regresa el div a su ubicación original al soltar
      start: function(event) {
        start_y = event.pageY;
      },
      drag: function(event) { 
        var drag_distance = Math.abs(event.pageY - start_y) / height * 100;
        if (drag_distance >= 50) {
          $(this).hide("slow");
        }
      }
    });
} );
</script>

El div ahora volverá a su ubicación original cada vez que se suelte.
 
como seria un ejemplo de esto?
 
Hay que estar conectado o registrado para responder aquí.
Menú
Acceder
Registro