Tema para preguntas random a Chatgpt 🤖

  • Autor Autor Carlos Arreola
  • Fecha de inicio Fecha de inicio
blankito1998 dijo:
como seria un ejemplo de esto?
Hacer clic para expandir...
Para establecer que un elemento vuelva a su posición original después de ser soltado tendrías que agregar la propiedad "revert: true" a tu función draggable. Aquí te dejo cómo se vería tu código con esta adición.

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");
        }
      },
      revert: true // Hace que el div regrese a su posición original al soltar
    });
} );
</script>
Con "revert: true", el div debería regresar a su posición original una vez que se suelte.
 
BotBeta dijo:
Para establecer que un elemento vuelva a su posición original después de ser soltado tendrías que agregar la propiedad "revert: true" a tu función draggable. Aquí te dejo cómo se vería tu código con esta adición.

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");
        }
      },
      revert: true // Hace que el div regrese a su posición original al soltar
    });
} );
</script>
Con "revert: true", el div debería regresar a su posición original una vez que se suelte.
Hacer clic para expandir...
como puedo hacer un div que se mueva solo arriba y abajo?
 
blankito1998 dijo:
como puedo hacer un div que se mueva solo arriba y abajo?
Hacer clic para expandir...
Puedes lograr esto usando la biblioteca jQuery UI con su función draggable y especificando el eje en el que se puede mover el div. Aquí te dejo un ejemplo de cómo hacerlo:

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>
  <style>
    #miDiv {
      width: 100px;
      height: 100px;
      background: #ccc;
    }
  </style>
</head>
<body>

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

<script>
$( function() {
    $( "#miDiv" ).draggable({ axis: "y" });
} );
</script>

</body>
</html>

Con este código, el div con id "miDiv" solo se puede mover hacia arriba y hacia abajo. Esto se logra especificando "y" como el valor para el parámetro "axis" en la función draggable.
 
BotBeta dijo:
Puedes lograr esto usando la biblioteca jQuery UI con su función draggable y especificando el eje en el que se puede mover el div. Aquí te dejo un ejemplo de cómo hacerlo:

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>
  <style>
    #miDiv {
      width: 100px;
      height: 100px;
      background: #ccc;
    }
  </style>
</head>
<body>

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

<script>
$( function() {
    $( "#miDiv" ).draggable({ axis: "y" });
} );
</script>

</body>
</html>

Con este código, el div con id "miDiv" solo se puede mover hacia arriba y hacia abajo. Esto se logra especificando "y" como el valor para el parámetro "axis" en la función draggable.
Hacer clic para expandir...
como hago para que desaparezca cuando baje el o suba el 50%?
 
blankito1998 dijo:
como hago para que desaparezca cuando baje el o suba el 50%?
Hacer clic para expandir...
Para hacer que el div desaparezca cuando se haya movido en más del 50% de la altura de la ventana, puedes usar el evento "drag" de la función draggable de jQuery UI para calcular el desplazamiento y ocultar el div cuando sea el caso. Aquí te dejo un ejemplo:

HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Constraints movement</title>
<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>
<style>
#miDiv {
  width: 150px; 
  height: 150px; 
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #ccc;
  user-select: none;
  cursor: move;
}
</style>
<script>
$( document ).ready(function() {
  var startTop;
  var windowHeight = $(window).height();

  $("#miDiv").draggable({
    axis: 'y',
    start: function(event, ui) {
      startTop = ui.position.top;
    },
    drag: function(event, ui) {
      var movedDistance = (ui.position.top - startTop) / windowHeight * 100;
      if(Math.abs(movedDistance) >= 50) {
        $(this).hide('slow');
      }
    }
  });
});
</script>
</head>
<body>
 
<div id="miDiv" class="ui-widget-content">
  <p>Arrástrame</p>
</div>
 
</body>
</html>

Este código hace que cuando arrastres el div verticalmente en más del 50% de la altura de la ventana, el div desaparezca lentamente.
 
BotBeta dijo:
Para hacer que el div desaparezca cuando se haya movido en más del 50% de la altura de la ventana, puedes usar el evento "drag" de la función draggable de jQuery UI para calcular el desplazamiento y ocultar el div cuando sea el caso. Aquí te dejo un ejemplo:

HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Constraints movement</title>
<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>
<style>
#miDiv {
  width: 150px;
  height: 150px;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #ccc;
  user-select: none;
  cursor: move;
}
</style>
<script>
$( document ).ready(function() {
  var startTop;
  var windowHeight = $(window).height();

  $("#miDiv").draggable({
    axis: 'y',
    start: function(event, ui) {
      startTop = ui.position.top;
    },
    drag: function(event, ui) {
      var movedDistance = (ui.position.top - startTop) / windowHeight * 100;
      if(Math.abs(movedDistance) >= 50) {
        $(this).hide('slow');
      }
    }
  });
});
</script>
</head>
<body>
 
<div id="miDiv" class="ui-widget-content">
  <p>Arrástrame</p>
</div>
 
</body>
</html>

Este código hace que cuando arrastres el div verticalmente en más del 50% de la altura de la ventana, el div desaparezca lentamente.
Hacer clic para expandir...
oks ahora como hago para que al dejar presionado durante 1 segundo se active esta funcion
 
blankito1998 dijo:
oks ahora como hago para que al dejar presionado durante 1 segundo se active esta funcion
Hacer clic para expandir...
Para lograr lo que pides requerirás usar el método mousedown para iniciar un temporizador y agregar la funcionalidad de arrastrar cuando el tiempo especificado ha pasado. Aquí te dejo cómo se haría:

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>
  <style>
    #miDiv {
      width: 100px;
      height: 100px;
      background: #ccc;
    } 
  </style>
  <script>
  $( function() {
    var pressTimer;

    $("#miDiv").mouseup(function() {
      clearTimeout(pressTimer);
      return false;
    }).mousedown(function() {
      var start_pos;
      var start_y;
      var height = $(window).height();

      pressTimer = window.setTimeout(function() {
        start_pos = $( "#miDiv" ).offset();

        $( "#miDiv" ).draggable({
          axis: 'y',
          start: function(event, ui) {
            start_y = event.pageY; 
          },
          drag: function(event, ui){
            var drag_distance = Math.abs(event.pageY - start_y) / height * 100;
            if (drag_distance >= 50) {
              $(this).hide("slow");
            }
          }
        });
      }, 1000);
      return false; 
    });

  });
  </script>
</head>
<body>
 
<div id="miDiv">Arrástrame</div>
 
</body>
</html>

En este código, mouseup y mousedown se utilizan para iniciar y cancelar un temporizador que después de 1 segundo (1000 milisegundos), activará la funcionalidad draggable. Por lo tanto, solo después de que el botón del ratón se mantenga presionado durante 1 segundo, permitirá arrastrar el div.
 
BotBeta dijo:
Para lograr lo que pides requerirás usar el método mousedown para iniciar un temporizador y agregar la funcionalidad de arrastrar cuando el tiempo especificado ha pasado. Aquí te dejo cómo se haría:

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>
  <style>
    #miDiv {
      width: 100px;
      height: 100px;
      background: #ccc;
    }
  </style>
  <script>
  $( function() {
    var pressTimer;

    $("#miDiv").mouseup(function() {
      clearTimeout(pressTimer);
      return false;
    }).mousedown(function() {
      var start_pos;
      var start_y;
      var height = $(window).height();

      pressTimer = window.setTimeout(function() {
        start_pos = $( "#miDiv" ).offset();

        $( "#miDiv" ).draggable({
          axis: 'y',
          start: function(event, ui) {
            start_y = event.pageY;
          },
          drag: function(event, ui){
            var drag_distance = Math.abs(event.pageY - start_y) / height * 100;
            if (drag_distance >= 50) {
              $(this).hide("slow");
            }
          }
        });
      }, 1000);
      return false;
    });

  });
  </script>
</head>
<body>
 
<div id="miDiv">Arrástrame</div>
 
</body>
</html>

En este código, mouseup y mousedown se utilizan para iniciar y cancelar un temporizador que después de 1 segundo (1000 milisegundos), activará la funcionalidad draggable. Por lo tanto, solo después de que el botón del ratón se mantenga presionado durante 1 segundo, permitirá arrastrar el div.
Hacer clic para expandir...
como hago que para al dejar presionado y pase el seg se mueva de una vez sin tener que soltar el click?
 
blankito1998 dijo:
como hago que para al dejar presionado y pase el seg se mueva de una vez sin tener que soltar el click?
Hacer clic para expandir...
Lo que estás pidiendo es una función específica que, lamentablemente, no es compatible de forma nativa con jQuery UI Draggable debido a su gestión de eventos. El evento "drag" se activa después del evento "mousedown", pero jQuery no considera este "mousedown" si estás usando un retraso con "setTimeout".

Una solución alternativa puede ser utilizar una biblioteca de arrastrar y soltar como interactJS que admite los gestos de presión y retención para iniciar una interacción de arrastrar.

Otro enfoque que podrías probar sería simular un evento de mouse "down" después de que el temporizador expire. Sin embargo, esto puede conllevar problemas de usabilidad y compatibilidad entre navegadores. En cualquier caso, recomendaría buscar una librería más avanzada de arrastrar y soltar que se ajuste a tus necesidades específicas.
 
BotBeta dijo:
Lo que estás pidiendo es una función específica que, lamentablemente, no es compatible de forma nativa con jQuery UI Draggable debido a su gestión de eventos. El evento "drag" se activa después del evento "mousedown", pero jQuery no considera este "mousedown" si estás usando un retraso con "setTimeout".

Una solución alternativa puede ser utilizar una biblioteca de arrastrar y soltar como interactJS que admite los gestos de presión y retención para iniciar una interacción de arrastrar.

Otro enfoque que podrías probar sería simular un evento de mouse "down" después de que el temporizador expire. Sin embargo, esto puede conllevar problemas de usabilidad y compatibilidad entre navegadores. En cualquier caso, recomendaría buscar una librería más avanzada de arrastrar y soltar que se ajuste a tus necesidades específicas.
Hacer clic para expandir...
me harias un ejemplo?
 
blankito1998 dijo:
me harias un ejemplo?
Hacer clic para expandir...
Claro, aquí tienes un ejemplo utilizando la biblioteca interact.js:

Insertar CODE, HTML o PHP: 
<!DOCTYPE html>
<html>
<head>
  <style>
    #miDiv {
      width: 90px;
      height: 90px;
      background: #ccc;
    }
  </style>
  <script src="https://cdn.interactjs.io/v1.10.11/interactjs/index.js"></script>
</head>

<body>
  <div id="miDiv">Arrástrame</div>
  
  <script>
    var timer;
    var height = window.innerHeight;

    interact("#miDiv").draggable({
      listeners: {
        move(event) {
          clearTimeout(timer);
          var target = event.target;
          var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

          target.style.transform = 'translateY(' + y + 'px)';
          target.setAttribute('data-y', y);

          var drag_distance = Math.abs(y) / height * 100;
          if (drag_distance >= 50) {
            target.style.display = "none";
          }
        },
        start(event) {
          var target = event.target;

          timer = setTimeout(() => {
            target.style.transform = '';
            target.setAttribute('data-y', 0);
            target.style.display = "block";
          }, 1000);
        },
        end(event) {
          clearTimeout(timer);
        }
      },
      modifiers: [
        interact.modifiers.restrict({
          restriction: 'parent',
          endOnly: true
        })
      ],
    });
  </script>
</body>
</html>

Este es un ejemplo básico de cómo podrías hacerlo utilizando la biblioteca interact.js. Por favor, ten en cuenta que esta biblioteca gestiona los eventos de mover de manera diferente a jQuery UI, así que quizá necesites hacer más modificaciones para adaptarlo a tus necesidades.
 
BotBeta dijo:
Claro, aquí tienes un ejemplo utilizando la biblioteca interact.js:

Insertar CODE, HTML o PHP: 
<!DOCTYPE html>
<html>
<head>
  <style>
    #miDiv {
      width: 90px;
      height: 90px;
      background: #ccc;
    }
  </style>
  <script src="https://cdn.interactjs.io/v1.10.11/interactjs/index.js"></script>
</head>

<body>
  <div id="miDiv">Arrástrame</div>
 
  <script>
    var timer;
    var height = window.innerHeight;

    interact("#miDiv").draggable({
      listeners: {
        move(event) {
          clearTimeout(timer);
          var target = event.target;
          var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

          target.style.transform = 'translateY(' + y + 'px)';
          target.setAttribute('data-y', y);

          var drag_distance = Math.abs(y) / height * 100;
          if (drag_distance >= 50) {
            target.style.display = "none";
          }
        },
        start(event) {
          var target = event.target;

          timer = setTimeout(() => {
            target.style.transform = '';
            target.setAttribute('data-y', 0);
            target.style.display = "block";
          }, 1000);
        },
        end(event) {
          clearTimeout(timer);
        }
      },
      modifiers: [
        interact.modifiers.restrict({
          restriction: 'parent',
          endOnly: true
        })
      ],
    });
  </script>
</body>
</html>

Este es un ejemplo básico de cómo podrías hacerlo utilizando la biblioteca interact.js. Por favor, ten en cuenta que esta biblioteca gestiona los eventos de mover de manera diferente a jQuery UI, así que quizá necesites hacer más modificaciones para adaptarlo a tus necesidades.
Hacer clic para expandir...
no me funciona, que debo hacer?
 
blankito1998 dijo:
no me funciona, que debo hacer?
Hacer clic para expandir...
Lamento que estés teniendo problemas. Aquí algunos pasos que podrías seguir:

1. Asegúrate de que tienes una conexión a internet activa para que el script de interact.js se cargue correctamente desde el CDN.
2. Verifica si hay errores en la consola de tu navegador. Los errores pueden dar pistas sobre qué puede estar yendo mal.
3. Confirma que estás añadiendo el script de InteractJS y tu propio código JavaScript después de tu HTML de elementos del div. El código JavaScript necesita ser leído después de que el DOM esté listo.
4. Asegúrate de que el navegador que estás utilizando es compatible con InteractJS. Los navegadores más antiguos pueden no ser compatibles con todas las características de InteractJS.

Si sigues teniendo problemas incluso después de seguir estos pasos, por favor proporciona una descripción más detallada del problema para que pueda ayudarte de manera más eficaz.
 
BotBeta dijo:
Lamento que estés teniendo problemas. Aquí algunos pasos que podrías seguir:

1. Asegúrate de que tienes una conexión a internet activa para que el script de interact.js se cargue correctamente desde el CDN.
2. Verifica si hay errores en la consola de tu navegador. Los errores pueden dar pistas sobre qué puede estar yendo mal.
3. Confirma que estás añadiendo el script de InteractJS y tu propio código JavaScript después de tu HTML de elementos del div. El código JavaScript necesita ser leído después de que el DOM esté listo.
4. Asegúrate de que el navegador que estás utilizando es compatible con InteractJS. Los navegadores más antiguos pueden no ser compatibles con todas las características de InteractJS.

Si sigues teniendo problemas incluso después de seguir estos pasos, por favor proporciona una descripción más detallada del problema para que pueda ayudarte de manera más eficaz.
Hacer clic para expandir...
ya verfique todo y nada, dejo presionado el click durante 1 segundo y despues intento moverlo hacia arriba o abajo y hace nada
 
blankito1998 dijo:
ya verfique todo y nada, dejo presionado el click durante 1 segundo y despues intento moverlo hacia arriba o abajo y hace nada
Hacer clic para expandir...
Mis disculpas por la confusión, parece que hubo un malentendido en la implementación. Los listeners de "start", "move" y "end", tal como su nombre indica, son para comenzar, mover y terminar la acción de arrastrar, no para el evento de mantener pulsado y soltar.

Voy a corregir eso y proponerte otra solución utilizando únicamente JS y sed de jQuery. El resultado es el mismo, ya que al presionar durante más de 1 segundo, puedes mover el objeto y una vez que lo sueltas, desaparecerá si lo moviste más del 50% de la altura de la ventana:

HTML: 
<!DOCTYPE html>
<html>
  <head>
    <style>
      #draggable {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        top: 0;
        user-select: none;
      }
    </style>
  </head>
  <body>
    <div id="draggable">Arrástrame</div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(function() {
        var box = $('#draggable');
        var startPos, endPos, isDraggable = false;
        
        box.mousedown(function(e) {
          startPos = e.pageY;
          isDraggable = false;
          
          setTimeout(function() {
            isDraggable = true;
            $(document).mousemove(function(e){
              if(isDraggable) {
                box.css('top', e.pageY);
                endPos = e.pageY;
              };
            }); 
          }, 1000); // ajustar la duración de presión aquí
          
          return false;
        });

        $(document).mouseup(function(e){
            if(isDraggable) {
              isDraggable = false;
              if(endPos <= ($(window).height()*0.5)) {
                box.fadeOut();
              }
            }
            $(document).unbind('mousemove'); 
        });
      });
    </script>
  </body>
</html>
Por cierto, no olvides sustituir https://code.jquery.com/jquery-3.6.0.min.js con la versión de jQuery que estés utilizando.
 
BotBeta dijo:
Este problema surge debido a que el temporizador creado en el evento 'mousedown' continua ejecutándose aún cuando el botón del mouse se ha liberado antes de los 5 segundos, debido a que el temporizador no se elimina o reinicia en el evento 'mouseup'.

Para solucionarlo, debes usar la función clearTimeout() para cancelar el temporizador en el evento 'mouseup'. Aquí te dejo cómo lo puedes hacer:

JavaScript: 
$(function() {
    var start_y;
    var height = $(window).height();
    var mouseDownTimer;

    $( "#miDiv" ).mousedown(function() {
        mouseDownTimer = setTimeout(function(){
            $( "#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");
                    }
                }
            });
        }, 5000);

    }).mouseup(function() {
        clearTimeout(mouseDownTimer);
        $( "#miDiv" ).draggable('destroy');
    });
});

Con este código, si el botón del mouse se suelta antes de que pasen los 5 segundos, la función setTimeout() se cancela, evitando que el div se vuelva 'draggable'. Y si el botón del mouse se mantiene presionado durante al menos 5 segundos, el div se vuelve 'draggable'. Al soltar el botón del mouse, independientemente de cuánto tiempo se haya mantenido presionado, el div dejará de ser 'draggable'. Esto garantiza que el div solo se pueda arrastrar mientras se mantiene presionado el botón del mouse.
Hacer clic para expandir...
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>
<div id="miDiv">Arrástrame</div>

<script>
$( function() {
$( "#miDiv" ).draggable({
start: function() {
$(this).hide("slow");
}
});
} );
</script>

<style>
#miDiv {
width: 100px;
height: 100px;
background: #ccc;
cursor: move;
}
</style>
puedes hacer que el div solo se pueda mover hacia la izquierda?
 
blankito1998 dijo:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>
<div id="miDiv">Arrástrame</div>

<script>
$( function() {
$( "#miDiv" ).draggable({
start: function() {
$(this).hide("slow");
}
});
} );
</script>

<style>
#miDiv {
width: 100px;
height: 100px;
background: #ccc;
cursor: move;
}
</style>
puedes hacer que el div solo se pueda mover hacia la izquierda?
Hacer clic para expandir...
¡Claro! Puedes limitar el movimiento del elemento a lo largo de un solo eje utilizando la opción "axis" en jQuery UI's draggable. Para restringir el movimiento a la izquierda (o la derecha), usa axis: 'x'. Aquí tienes cómo se haría:

HTML: 
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>

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

<script>
$( function() {
    $( "#miDiv" ).draggable({
      axis: 'x',
      start: function() {
        $(this).hide("slow");
      }
    });
} );
</script>

<style>
#miDiv {
  width: 100px;
  height: 100px;
  background: #ccc;
  cursor: move;
}
</style>

Esto hará que el div #miDiv solo pueda ser arrastrado hacia la izquierda o la derecha.
 
BotBeta dijo:
¡Claro! Puedes limitar el movimiento del elemento a lo largo de un solo eje utilizando la opción "axis" en jQuery UI's draggable. Para restringir el movimiento a la izquierda (o la derecha), usa axis: 'x'. Aquí tienes cómo se haría:

HTML: 
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>

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

<script>
$( function() {
    $( "#miDiv" ).draggable({
      axis: 'x',
      start: function() {
        $(this).hide("slow");
      }
    });
} );
</script>

<style>
#miDiv {
  width: 100px;
  height: 100px;
  background: #ccc;
  cursor: move;
}
</style>

Esto hará que el div #miDiv solo pueda ser arrastrado hacia la izquierda o la derecha.
Hacer clic para expandir...
haz que desaparezca solo cuando se mueva al 50% hacia a la izquierda
 
blankito1998 dijo:
haz que desaparezca solo cuando se mueva al 50% hacia a la izquierda
Hacer clic para expandir...
Por supuesto, aquí tienes la solución:

HTML: 
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>

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

<script>
$(function() {
  var start_pos, start_x;

  $("#miDiv").draggable({
    axis: 'x',
    start: function(event, ui) {
      start_pos = $(this).offset();
      start_x = event.pageX;
    },
    stop: function(event, ui) {
      var width = $(window).width();
      var drag_distance = Math.abs(event.pageX - start_x) / width * 100;
      if (drag_distance >= 50) {
        $(this).hide("slow");
      }
    }
  });
});
</script>

<style>
#miDiv {
  width: 100px;
  height: 100px;
  background: #ccc;
  cursor: move;
}
</style>

En este código, el div #miDiv solo se puede mover a lo largo del eje x. El evento 'start' guarda la posición inicial y el evento 'stop' calcula la distancia arrastrada. Si el div se ha movido al menos el 50% de la anchura de la ventana, se oculta.
 
BotBeta dijo:
Por supuesto, aquí tienes la solución:

HTML: 
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>

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

<script>
$(function() {
  var start_pos, start_x;

  $("#miDiv").draggable({
    axis: 'x',
    start: function(event, ui) {
      start_pos = $(this).offset();
      start_x = event.pageX;
    },
    stop: function(event, ui) {
      var width = $(window).width();
      var drag_distance = Math.abs(event.pageX - start_x) / width * 100;
      if (drag_distance >= 50) {
        $(this).hide("slow");
      }
    }
  });
});
</script>

<style>
#miDiv {
  width: 100px;
  height: 100px;
  background: #ccc;
  cursor: move;
}
</style>

En este código, el div #miDiv solo se puede mover a lo largo del eje x. El evento 'start' guarda la posición inicial y el evento 'stop' calcula la distancia arrastrada. Si el div se ha movido al menos el 50% de la anchura de la ventana, se oculta.
Hacer clic para expandir...
puedes hacer que nada mas se mueva hacia la izquierda?
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba