ajuste de los límites de frontera para un objeto arrastrable

que tienen dos elementos:ajuste de los límites de frontera para un objeto arrastrable

1. Un padre de altura fija, overflow:hidden

2. Su hijo, de mayor altura fija.

<style type="text/css"> 
    .myList {list-style:none; margin:0px; padding:1px;} 
    .myList li{ height:50px; margin:4px; padding:2px;} 
    .dragPanel {height:230px; border:solid; overflow:hidden;} 
</style> 

<div class="dragPanel"> 
    <ul class="myList"> 
     <li>1</li> 
     <li>2</li> 
     ... .... 
     <li>8</li> 
     <li>9</li> 
    </ul> 
</div>

Quiero ser capaz de arrastrar la lista hacia arriba y hacia abajo dentro del div padre. Estoy usando el plugin jquery ui draggable para lograr el arrastre vertical, pero no estoy seguro de cómo restringir la lista dentro del div principal.

<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.dragPanel').addClass("hover"); 
     $('.myList').draggable({ axis: 'y' }); 
    }); 
</script>

¿Cómo hago para establecer los límites superior e inferior de verticle para la posición de la lista?

Fuente

2009-10-10 Paul

Ok,

Esta es la ruta que he bajado ...

Cuando se carga la página, agrego un contenedor div alrededor del arrastrable lista. Me puse a su altura doble de la lista, a continuación, posición que hasta la página un poco:

<script type="text/javascript"> 
    $(document).ready(function() { 
     CreateContainerDiv(); 
     $('.dragPanel').addClass("hover"); 
     $('.myList').draggable({ axis: 'y', containment: 'parent' }); 
    }); 

    function CreateContainerDiv() { 
     var dragPanel = $('.dragPanel'); 
     var dragTarget = $('.myList'); 

     // add the container panel 
     var newPanelHeight = dragTarget.outerHeight() * 2 - dragPanel.outerHeight(); 
     dragTarget.wrap(document.createElement("div")); 

     // set its height and put it in the right place 
     dragTarget.parent().css("height", newPanelHeight); 
     dragTarget.parent().css("position", "relative"); 
     var newPanelPosition = ((dragTarget.outerHeight() * -1)/2); 
     dragTarget.parent().css("top", newPanelPosition);   
    } 
</script>

la lista es entonces contenía a este nuevo elemento.

Esto parece hacer el trabajo, pero el posicionamiento es un poco shakey si la lista tiene algún relleno/margen aplicado. ¡Cualquier idea sobre eso sería apreciada!

------ --------- Editar

Ok, creo que he resuelto el problema de la colocación. He convertido esto en un complemento para que otras personas no tengan que perder tiempo creando esta funcionalidad.

jQuery Drag-gable List at Github

Fuente

2009-10-10 15:08:10 Paul

enfoque muy muy agradable, para agregar otro panel de desplazamiento con algún otro tamaño es muy agradable.Excelente Pablo .. –

Uso del containment option:

$('.myList').draggable({ 
    axis: 'y', 
    containment: 'parent' 
});

Fuente

2009-10-10 11:08:26 moff

El padre es de menor importancia que su hijo - cuando intento esta opción, el arrastre no funciona - la lista simplemente salta entre las posiciones superior e inferior – Paul

Esto fue increíble.fácil – Tushortz

que tenían los mismos problemas y las respuestas no me ayuda. Algún javascript más tarde, creo que la siguiente es una mejor solución.

(¿Alguien sabe cómo convertir esto en un plugin de jQuery?)

<!DOCTYPE html> 
<html> 
<head> 
    <title>Draggable limited to the container</title> 
    <style type="text/css"> 
    #container { 
     cursor: move; 
     overflow: hidden; 
     width: 300px; 
     height: 300px; 
     border: 1px solid black; 
    } 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
     $.globalVars = { 
      originalTop: 0, 
      originalLeft: 0, 
      maxHeight: $("#draggable").height() - $("#container").height(), 
      maxWidth: $("#draggable").width() - $("#container").width() 
     }; 
     $("#draggable").draggable({ 
      start: function(event, ui) { 
       if (ui.position != undefined) { 
        $.globalVars.originalTop = ui.position.top; 
        $.globalVars.originalLeft = ui.position.left; 
       } 
      }, 
      drag: function(event, ui) { 
       var newTop = ui.position.top; 
       var newLeft = ui.position.left; 
       if (ui.position.top < 0 && ui.position.top * -1 > $.globalVars.maxHeight) { 
        newTop = $.globalVars.maxHeight * -1; 
       } 
       if (ui.position.top > 0) { 
        newTop = 0; 
       } 
       if (ui.position.left < 0 && ui.position.left * -1 > $.globalVars.maxWidth) { 
        newLeft = $.globalVars.maxWidth * -1; 
       } 
       if (ui.position.left > 0) { 
        newLeft = 0; 
       } 
       ui.position.top = newTop; 
       ui.position.left = newLeft; 
      } 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <div id="container"> 
     <img id="draggable" src="avatar.jpg" /> 
    </div> 
</body> 
</html>

Fuente

2010-12-03 15:03:16 Lode

Usted no tiene que arrastrar cualquier cosa por ese tipo de estructura. Lo que necesita es configurar el div principal con overflow-x: hidden; y overflow-y: scroll ;. De esta forma, su contenido será desplazable.

Si desea ocultar la barra de desplazamiento, simplemente ponga esta propiedad: .dragPanel :: - webkit-scrollbar {width: 0! Important} ¡y eso es todo! Realmente no sé por qué pensabas arrastrar elementos en lugar de simplemente desplazar el contenido (que es la forma correcta de llevar a cabo este tipo de "problemas"). De todos modos, espero que ayude a cualquiera que necesite adaptarse a la misma necesidad. ¡Saludos!

Fuente

2017-09-23 01:15:38 Criss

ajuste de los límites de frontera para un objeto arrastrable

Respuesta

Cuestiones relacionadas