es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Contención de elemento secundario de jQuery Draggable

21 Jul, 2023 Programación

Estoy utilizando la biblioteca jQuery-ui para arrastrar una imagen/hijo dentro de un contenedor padre. En teoría, estoy tratando de replicar los límites de una página web en un navegador. Quiero:

  1. Si el borde inferior del hijo alcanza el borde inferior del padre, quiero evitar arrastrar más hacia arriba en el eje y.
  2. Si el borde superior del hijo alcanza el borde superior del padre (que es la posición inicial al cargar la página), evitar arrastrar hacia abajo en el eje y.

Un CodePen rápido para ayudar a ilustrar dónde estoy: https://codepen.io/austin-branham/full/eYGgoNg

Mi script:

var draggableHeight = $('.draggable').height();
var parentHeight = $('.project-image').height();

$('.draggable').draggable({
  axis: 'y',
  drag: function(e, ui) {
    // averiguar qué tan lejos arrastrar dentro de esta función
  }
});
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para evitar que el elemento hijo sea arrastrado más allá de los límites del contenedor padre, podemos modificar la función drag en nuestro código de jQuery. Aquí están los pasos:

    1. Determinar la posición inferior actual del elemento hijo sumando su altura y posición superior.
    2. Si la posición inferior es mayor o igual a la altura del contenedor padre, establecer la posición superior del elemento hijo como la diferencia entre la altura del contenedor padre y la altura del elemento hijo. Esto evitará que se pueda arrastrar más hacia arriba en el eje y.
    3. Determinar la posición superior actual del elemento hijo.
    4. Si la posición superior es menor o igual a la posición superior inicial (cuando se carga la página), establecer la posición superior del elemento hijo como la posición superior inicial. Esto evitará que se pueda arrastrar más hacia abajo en el eje y.
    5. Modificar nuestra función drag para incluir la lógica anterior.

    Aquí está el código modificado:

    var draggableHeight = $('.draggable').height();
var parentHeight = $('.project-image').height();
var initialTop = $('.draggable').position().top;

$('.draggable').draggable({
  axis: "y",
  drag: function(e, ui) {
    var currentBottom = ui.position.top + draggableHeight;
    if (currentBottom >= parentHeight) {
      ui.position.top = parentHeight - draggableHeight;
    }
    var currentTop = ui.position.top;
    if (currentTop <= initialTop) {
      ui.position.top = initialTop;
    }
  }
});

    Esto debería permitir replicar los límites de una página web en un navegador y evitar que el elemento hijo se pueda arrastrar fuera de su contenedor padre.

Comments are closed.