Desplazar div cuando el elemento se arrastra sin mover el mouse

Desarrollé un código que incluía una tabla con todas sus celdas como desplegables. El contenedor de la tabla es div con una altura fija y una barra de desplazamiento.

Me gustaría arrastrar un elemento (cuadrado amarillo en mi ejemplo) a la última celda de la tabla en la parte inferior de mi tabla. Todo funciona bien, pero para activar la barra de desplazamiento de mi contenedor div cuando estoy arrastrando el elemento, Debo mover el mouse todo el tiempo..

¿Existe la posibilidad de desplazarse hacia abajo automáticamente cuando mi elemento se arrastra cerca de la parte inferior de mi contenedor div sin mover el mouse?

Aquí está mi ejemplo: http://jsbin.com/upunek/19/edit

Gracias por adelantado

preguntado el 03 de mayo de 12 a las 16:05

1 Respuestas

Lo descubro esta mañana.

yo creé setInterval funcionar cuando el evento de arrastre la posición se encuentra a 70px del borde

Aquí está el violín que hice: http://jsfiddle.net/pPn3v/22/

var yellow = $('#yellow');
var offset = yellow.offset();
var offsetWidth = offset.left + yellow.width();
var offsetHeight = offset.top + yellow.height();

var red = $('#red');

var intRightHandler = null;
var intLeftHandler = null;
var intTopHandler= null;
var intBottomHandler= null;
var distance = 70;
var timer = 100;
var step = 10;


function clearInetervals()
{
    clearInterval(intRightHandler);
    clearInterval(intLeftHandler);
    clearInterval(intTopHandler);
    clearInterval(intBottomHandler);    
}

red.draggable({
    start : function(){},
    stop: function(){clearInetervals(); },    
    drag : function(e){
        var isMoving = false;        
        //Left
        if((e.pageX - offset.left) <= distance)
        {
            isMoving = true;
            clearInetervals();            
            intLeftHandler= setInterval(function(){
                yellow.scrollLeft(yellow.scrollLeft() - step)
            },timer);
            console.log('left')
        }

        //Right
        if(e.pageX >= (offsetWidth - distance))
        {
            isMoving = true;
            clearInetervals();            
            intRightHandler = setInterval(function(){
                yellow.scrollLeft(yellow.scrollLeft() + step)
            },timer);
            console.log('right')
        }

        //Top
        if((e.pageY - offset.top) <= distance)
        {
            isMoving = true;
            clearInetervals();            
            intTopHandler= setInterval(function(){
                yellow.scrollTop(yellow.scrollTop() - step)
            },timer);
            console.log('top')
        }                          

        //Bottom
        if(e.pageY >= (offsetHeight - distance))
        {
            isMoving = true;
            clearInetervals();            
            intBottomHandler= setInterval(function(){
                yellow.scrollTop(yellow.scrollTop() + step)
            },timer);
            console.log('bottom')
        }     

        //No events
        if(!isMoving)
           clearInetervals();  
    }
});

Respondido 01 Oct 12, 05:10

Realmente aprecié tu respuesta. muchas gracias de verdad Me salvas. También enfrenté un problema exactamente similar contigo y probé alrededor de 3 días para trabajar. Pero tu respuesta solo soluciona mi problema. - Cataclismo

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.