Estoy tratando de crear un draggable área dentro de un div. Funciona bien, pero yo no quiero que el espacio en blanco fuera de la posibilidad de arrastrar la zona y, por tanto, quiere limitar el área que puede ser arrastrado. Lo que he llegado hasta ahora es aquí en este violín.

La imagen inicialmente está situado a la parte superior izquierda de la div padre. Si lo arrastra a la derecha o en la parte inferior, se puede ver el espacio en blanco, que yo no lo prefieren. ¿Cómo puedo restringir esta?

Creo que se puede hacer uso de la Contención parámetro en la posibilidad de arrastrar evento de jQuery interfaz de usuario utilizando

$( ".selector" ).draggable({ containment: "" });

Pero no soy capaz de averiguar cómo. También, si toda la página fue de un solo elemento draggable (algo similar a Google Maps), ¿cómo puedo limitar el que?

entonces, ¿qué quieres u cuando u arrastrar la imagen a la derecha o a la parte inferior?
En ese caso, el arrastre debe simplemente no ocurrir en absoluto.

OriginalEl autor Gautam Krishnan | 2013-06-08

1 Comentario

  1. 11

    Usted puede hacer esto mediante un ajuste de la imagen en un div contenedor que es dos veces tan grande como la de la imagen, menos el widnow div tamaño, y el desplazamiento por el tamaño de la gama div. Eso y la contención de la opción y listo.

    jsFiddle ejemplo

    HTML

    <div id="range">
        <div id="container">
            <img src="http://www.hdwallpapers.in/walls/enchanted_forest-wide.jpg" id="map" />
        </div>
    </div>

    JS

    jQuery("#map").draggable({
        containment: $('#container')
    });

    CSS

    #range {
        width:400px;
        height:400px;
        overflow:hidden;
        border:1px solid black;
        position:relative;
    }
    #container {
        position:absolute;
        top:-800px;
        left:-1520px;
        width: 3440px;
        height: 2000px;
    }
    #map {
        width: 1920px;
        height: 1200px;
        top:800px;
        left:1520px;
    }

    La imagen de abajo debe darle una idea del tamaño del contenedor en relación con la imagen y el área de visualización. La ventana es el más pequeño cuadrado en el centro de la imagen con un borde negro y el envoltorio es el más grande en general rectángulo. Usted puede ver la imagen a medida que se trasladó a las posiciones extremas.

    La restricción de la posibilidad de arrastrar área en la interfaz de usuario jQuery

    En el clavo! Eso es exactamente lo que estaba buscando. Podrías explicar un poco más por favor? ¿Y si quiero la posibilidad de arrastrar área por completo a la página? ¿Cómo puedo configurar el ancho y la altura, entonces?
    Esencialmente lo que siempre se debe hacer es crear un contenedor o recipiente que doble el tamaño de la imagen, menos la anchura/altura de la ventanilla. Que el contenedor se debe compensar a la izquierda y la parte superior, mientras que la imagen se compensa con el opuesto de tal forma que comienza en la posición correcta.
    En realidad, esto funcionó bastante bien! Gracias. Tuve que hacer algunos ajustes para dejar algo de relleno alrededor de los «mapa de juego» estoy haciendo, pero, en el mismo concepto. Genial! Gracias.

    OriginalEl autor j08691

Dejar respuesta

Please enter your comment!
Please enter your name here