Este es mi código:

http://jsfiddle.net/652nk/

HTML

<div id="canvas">
    <div id="dragme"></div>
</div>

CSS

#canvas {
    width:500px;
    height:250px;
    border:1px solid #444;
    zoom:0.7;
}
#dragme {
    width:100px;
    height:50px;
    background:#f30;
}

JS

$(function(){
    $('#dragme').draggable({containment:'parent'})
})

Tengo un gran problema cuando se utiliza css zoom de la propiedad. La posición de destino se pueden arrastrar div no se coordina con la posición del cursor.

Hay alguna limpio y simple solución? Yo debería ser capaz de cambiar el zoom de forma dinámica.

He visto este: stackoverflow.com/questions/2930092/… …no se mucho de ayuda.
¿por qué estás usando el zoom?
¿Por qué no es de mucha ayuda? Parece ser exactamente el problema.
Necesito escala (hacerla más pequeña) un div que contiene otros del div que son arrastrables.
Yo podría no conseguir que la solución/respuesta y la ejecución.

OriginalEl autor enloz | 2011-12-22

3 Comentarios

  1. 20

    No es necesario ajustar el zoom de la propiedad. Acabo de añadir la diferencia a la posibilidad de arrastrar la posición que se produce debido a la propiedad zoom. Espero que ayude.

    Violín

    http://jsfiddle.net/TqUeS/

    JS

    var zoom = $('#canvas').css('zoom');
    var canvasHeight = $('#canvas').height();
    var canvasWidth = $('#canvas').width();
    
    $('#dragme').draggable({
        drag: function(evt,ui)
        {
            //zoom fix
            ui.position.top = Math.round(ui.position.top / zoom);
            ui.position.left = Math.round(ui.position.left / zoom);
    
            //don't let draggable get outside the canvas
            if (ui.position.left < 0) 
                ui.position.left = 0;
            if (ui.position.left + $(this).width() > canvasWidth)
                ui.position.left = canvasWidth - $(this).width();  
            if (ui.position.top < 0)
                ui.position.top = 0;
            if (ui.position.top + $(this).height() > canvasHeight)
                ui.position.top = canvasHeight - $(this).height();  
    
        }                 
    });
    Hm…Gracias por una respuesta, pero no está funcionando. Si he de poner por ejemplo, zoom:0.4jsfiddle.net/jtnQU/1
    Mi mal. He actualizado.

    OriginalEl autor tuze

  2. 8

    La solución anterior no funciona para mí. Así que me encontré a mi. Quería compartir si alguien más tiene el mismo problema.

    var zoom = $('#canvas').css('zoom');    
    $('#dragme').draggable({
        drag: function(evt,ui)
        {
             var factor = (1 / zoom) - 1
    
             ui.position.top += Math.round((ui.position.top - ui.originalPosition.top) * factor)
             ui.position.left += Math.round((ui.position.left - ui.originalPosition.left) * factor)   
        }                 
    });
    funciona como un encanto
    Esta solución funciona, no!
    Esta solución es ideal y debe ser aceptada, porque correctamente las cuentas para el contenedor de los padres de ser ampliada. Gracias Yusuf!

    OriginalEl autor Yusuf Demirag

  3. 2

    He utilizado tanto tuze y Yusuf Demirag de las soluciones y añade un poco de algo para arrastrar en una cuadrícula:

    var gridSize = 20;
    $('#dragme').draggable({
        grid: [ gridSize , gridSize ],
        snap: true,
        snapTolerance: gridSize/2,
    
        drag: function(event,ui){
             var factor = (1 / zoom) -1;
    
             ui.position.top += Math.round((ui.position.top - ui.originalPosition.top) * factor);
             ui.position.top -= ui.position.top % gridSize;
             ui.position.left += Math.round((ui.position.left- ui.originalPosition.left) * factor);
             ui.position.left -= ui.position.left % gridSize;
    
    
             if (ui.position.left < 0) 
                 ui.position.left = 0;
             if (ui.position.left + $(this).width() > canvasWidth)
                 ui.position.left = canvasWidth - $(this).width();  
             if (ui.position.top < 0)
                 ui.position.top = 0;
             if (ui.position.top + $(this).height() > canvasHeight)
                 ui.position.top = canvasHeight - $(this).height();
        }
    });

    Tiene un error menor (no puede a veces llegar a un valor exacto, por ejemplo: 160px) pero funcionó para lo que yo necesitaba.

    Espero que ayude.

    OriginalEl autor kriskate

Dejar respuesta

Please enter your comment!
Please enter your name here