jquery - examples - ui draggable dragging

Con jquery ui draggable, ¿es posible tener diferentes scrollsensitivity vertical versus horizontal?

Question

Estoy usando jquery ui draggable y me di cuenta de que quiero que la sensibilidad de desplazamiento sea mucho más pequeña cuando estoy arrastrando hacia arriba (en lugar de hacia la izquierda / derecha). ¿Es posible tener una configuración diferente para el arrastre vertical frente al horizontal?

Aquí está mi código actual

   $(".myDraggable").draggable(
            {
                stack: ".myDraggable",
                scroll: true,
                scrollSensitivity: 250,
                scrollSpeed: 40,
                revert: function (event, ui) {
                    $(this).data("uiDraggable").originalPosition = {
                        top: 0,
                        left: 0
                    };
                    return !event;
                }
            }
        );

Answer 1

Respuesta actualizada

Ejemplo de trabajo: http://jsfiddle.net/22bpbsrw/3/

Creo que detecta cuándo funciona un evento de desplazamiento en la ventana gráfica. Puede establecer la velocidad de desplazamiento y la sensibilidad a continuación.

var lastScrollTop = 0,
    lastScrollLeft = 0,
    delta = 5;
$(''#viewPort'').scroll(function (event) {
    var st = $(this).scrollTop();
    var sl = $(this).scrollLeft();

    if (Math.abs(lastScrollTop - st) > delta) {
        $("#draggable").draggable("option", "scrollSensitivity", 5);
        $("#draggable").draggable("option", "scrollSpeed", 10);
        (st > lastScrollTop) ? console.log(''scroll down'') : console.log(''scroll up'');
        lastScrollTop = st;
    }

    if (Math.abs(lastScrollLeft - sl) > delta) {
        $("#draggable").draggable("option", "scrollSensitivity", 100);
        $("#draggable").draggable("option", "scrollSpeed", 40);
        sl > lastScrollLeft ? console.log(''scroll right'') : console.log(''scroll left'');
        lastScrollLeft = sl;
    }
});

Vieja respuesta

Izquierda por si acaso podría ayudar a otros.

No puede tener explícitamente diferentes valores de scrollSensitivity para cada dirección. ¿Tal vez podría enviar un ticket para esa mejora?

Es posible que pueda cambiarlo mediante la función de arrastre ( según esta respuesta ). Vea el ejemplo de trabajo aquí: http://codepen.io/anon/pen/mbups?editors=001

drag: function(e) {    
  console.log($("#drag1").draggable( "option", "scrollSensitivity"));
  if(prevX == -1) { prevX = e.pageX; }
  // dragged left or right
  if(prevX > e.pageX || prevX < e.pageX) { // dragged right
      $("#drag1").draggable( "option", "scrollSensitivity", 100 );
  }
  prevX = e.pageX;

 if(prevY == -1) { prevY = e.pageY; } 
  // dragged up or down
  if(prevY > e.pageY || prevY < e.pageX) { // dragged down
      $("#drag1").draggable( "option", "scrollSensitivity", 1 );
  }
  prevY = e.pageY;
}

Puede establecer la scrollSensitivity función de la dirección del elemento arrastrado.

Answer 2

Aunque parece que la solución de JSuar funciona, también quiero intentarlo.

Resolviendo el problema con jQuery UI El widget arrastrable no es posible.

No hay una función explícita para obtener información sobre si el objeto se mueve vertical u horizontalmente. De hecho, en la mayoría de los casos, el objeto se mueve en ambas direcciones . Pero podríamos definir nuestra propia función para ver cómo se movió el cursor

Use una función personalizada para obtener información sobre el objeto arrastrado

La idea es disparar un evento en mousemove y verificar la posición del cursor cada vez. Después de un cierto intervalo de movimientos de mouse, verificamos el movimiento general para establecer la sensibilidad de desplazamiento. En este caso, simplemente suponemos que el usuario probablemente arrastre en la misma dirección para los siguientes movimientos.

Aquí hay un ejemplo de trabajo de JSFiddle.

HTML

<div id="viewPort">
    <div id="draggable">drag me</div>
</div>

CSS

#viewPort {
    width: 300px;
    height: 300px;
    background: #fff;
    overflow:scroll;
    border:1px solid #ccc;
}
#draggable {
    color: #fff;
    width: 75px;
    height: 75px;
    padding: 10px;
    background: #333399;
    border:1px solid #ccc;
    margin:5px;
}

JS

//current count of how often we got the mouse positon
var count = 0;
//position of mouse at last function call
var lastPositionX;
var lastPositionY;
//how often we moved in one direction in the last intervall
var movedX;
var movedY;
//intervall to check movement again
var countIntervall = 30;

$("#draggable").draggable({
    scrollSensitivity: 1000,
    scrollSpeed: 40,
    revert: function (event, ui) {
        $("#draggable").originalPosition = {
            top: 0,
            left: 0
        };
        return !event;
    },
    drag: function (e) {
       setScrollSensivity();
    }
});

//init first mousepostion
$("#draggable").on(''click'', function() {
    lastPositionX = event.pageX;
    lastPositionY = event.pageY;
});

function setScrollSensivity(){
    count++;

    //get current mousepostion
    var currentPositionX = event.pageX; 
    var currentPositionY = event.pageY; 

    //increase if moved on chose axis
    if ( currentPositionX != lastPositionX ){
        movedX++;
    }

    if ( currentPositionY != lastPositionY ){
        movedY++;
    }

    //if moved more on x axis decrease sensivity, else increase.
    if (count == countIntervall){
        if (movedX > movedY){
            console.log("moving on X axis");
            $( "#draggable" ).draggable( "option", "scrollSensitivity", 10 );
        } else {
            console.log("moving on Y axis");
            $( "#draggable" ).draggable( "option", "scrollSensitivity", 200 );
        }
        //reset all the counters and start again
        count = 0;
        movedX = 0;
        movedY = 0;
    }
    //set last position for our next function call
    lastPositionX = currentPositionX;
    lastPositionY = currentPositionY;
}