С помощью jQuery ui draggable можно ли иметь различную чувствительность к прокрутке по вертикали и горизонтали?

Я использую в jQuery пользовательского интерфейса можно перетаскивать и я понял, что хочу, чтобы чувствительность к прокрутке была намного меньше, когда я перетаскиваю вверх (против влево / вправо). Возможно ли иметь разные настройки для вертикального и горизонтального перетаскивания?

вот мой текущий код

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

2 ответов

Обновил Ответ

Пример: http://jsfiddle.net/22bpbsrw/3/

Я думаю, что обнаружение, когда событие прокрутки происходит в окне просмотра, действительно работает. Вы можете установить скорость прокрутки и чувствительность.

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;
    }
});

Ответ

оставил на всякий случай, если это может помочь другим.

вы не можете явно иметь разные scrollSensitivity значений для каждого направления. Может быть, вы могли бы подать билет на это повышение?

вы можете изменить его с помощью функции перетаскивания (на основе этого ответа). См. рабочий пример здесь: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;
}

вы можете установить scrollSensitivity на основе направления перетаскиваемого элемента.

4

хотя кажется, что решение JSuar работает, я тоже хочу попробовать.

решение проблемы с jQuery UI перетаскиваемый виджет не представляется возможным.

здесь нет явной функции чтобы получить информацию о том, перемещается ли объект вертикально или горизонтально. На самом деле в большинстве случаев объект перемещается в обоих направлениях. Но мы могли бы определить нашу собственную функцию, чтобы посмотреть, как курсор был перемещен

используйте пользовательскую функцию чтобы получить информацию о перетаскиваемом объекте

идея в том, чтобы уволить событие на событие mousemove и каждый раз проверяйте курсорпозицию. После некоторые intervall из mousemovements мы проверьте общее движение установить scrollsensitivity. В этом случае мы просто предполагаем, что пользователь, скорее всего, будет перетаскивать в том же направлении для следующих движений.

здесь является рабочим 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;
}
1