jquery se pueden arrastrar a la contención de

Tengo un pequeño proyecto en el que estoy trabajando, y tiene una interesante contención problema con jquery draggable:

Básicamente, tengo dos divs – top & y una parte inferior. Entonces, tengo una tercera div que es una .draggable({}) y se puede arrastrar para cambiar el tamaño de la parte superior e inferior div.

— echa un vistazo aquí: http://jsfiddle.net/Kpt2K/7/

El problema es que yo no soy capaz de contener el arrastre como me gustaría. En el violín por encima, me puse naranja <span>s, donde me gustaría la contención de inicio y de fin.

Nota interesante: he intentado hacer algo de lo siguiente:

$('#container').innerWrap('<div id='containmentBox' />');

var containerHeight = $('#container').height();

$('#containmentBox').css({'height': containerHeight - 45);

esto hizo que la contención de trabajo para la parte inferior, pero no de la parte superior de intervalo. Así que, creo que estoy atascado utilizando containment: [x1,y1,x2,y2], pero no he comprendido cómo usarlo.

Echar un vistazo en el violín, y me dejó saber lo que puede llegar a limitar la posibilidad de arrastrar el movimiento dentro de las dos de naranja se extiende.

OriginalEl autor Jeff | 2012-12-28

4 respuestas

  1. 8

    La contención opción permite una matriz donde para establecer las posiciones donde la contienen. Intente esto:

    var containmentTop = $("#stop-top").position().top;
    var containmentBottom = $("#stop-bottom").position().top;
    
    $('#bar').draggable({axis: 'y', containment : [0,containmentTop,0,containmentBottom] });

    JSFiddle ejemplo

    OriginalEl autor Josep

  2. 5

    También puede utilizar un helper: y esto permitirá que usted agregue un div que puede establecer dinámicamente el tamaño de antes de la posibilidad de arrastrar acción que se produzca. Esto le permite hacer referencia a él en la contención, aunque no es en realidad parte de la página todavía. Si utiliza start:, este div no hay por el momento la posibilidad de arrastrar la función busca de contención elemento. Usted puede limpiar en el stop:

    $(<<selector>>).draggable({
        helper: function (event, ui) {
            var target = $(this).clone();
            var oBody = $(document).find('body');
            var containmentDiv = $('<div id="div_containment"></div>');
            containmentDiv
                .css('top',calculatedTop)
                .css('left',calculatedLeft)
                .css('width',calculatedWidth)
                .css('height',calculatedHeight)
                .css('position','absolute');
            containmentDiv.appendTo(oBody);
                target.children('div').remove();
                target.css('background-color','#f00');
                return target;
            },
        stop: function(event, ui) {
            $(document).filter('body').find('#div_containment').remove();
        },
        containment: "#div_containment"   //containment via selector
    });

    Puede utilizar un objeto de JavaScript de referencia para establecer los valores calculados en helper: en otros lugares

    Esto funciona muy bien. Yo quería arrastrar el original objeto DOM, así que sólo tenía helper: return $(este), que hizo el trabajo.

    OriginalEl autor Mr Tills

  3. 2

    Se puede restringir la contención en un cuadro delimitado por los 2 elementos de parada :

    var top = $("#stop-top").offset().top + $("#stop-top").height();
    var bottom = $("#stop-bottom").offset().top - $("#bar").height();
    $('#bar').draggable({axis: 'y', containment : [0, top, 10000, bottom] });

    JsFiddle : http://jsfiddle.net/Kpt2K/9/

    OriginalEl autor Samuel Caillerie

  4. 2

    Es cierto que la documentación es delgada – tuve que hacer un montón de pruebas para averiguar.

    Mi error fue pensar que la contención de la matriz se define un límite en el que la posibilidad de arrastrar el elemento se podía mover, definido como [x, y, ancho, alto], pero he encontrado que la contención de la matriz define la parte superior izquierda e inferior derecha de los puntos que definen el límite definido como [x1, y1, x2, y2] que los elementos contenidos origen puede mover dentro.

    Esto tiene sentido en el que los dos últimos elementos de la matriz se define como x2 y y2 (punto de propiedades), no w y h (propiedades del rectángulo), pero la documentación debe ser más específicos en cuanto a exactamente lo que estos parámetros la media en el contexto del elemento contenido, y dentro de qué contexto (en contra de los contenidos del elemento de origen) y el sistema de coordenadas (el contenido del elemento).

    Esta es la mejor respuesta. También vale la pena mencionar que el corrdinates (x1,y1,x2,y2), se refieren a la compensación de coordenadas de la ayuda.

    OriginalEl autor Jeff Young

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *