当鼠标使用jquery移动到页面底部时，如何自动滚动窗口

I have 50 divs,But in my window it shows only 25,I do drag and drop activity on these divs.So If i drag my first div near 25th div,It should scroll automatically to show the remaining divs.How do i do this in jquery? any idea?

我有50个div,但是在我的窗口中它只显示25个,我会在这些div上拖放活动。所以如果我将第一个div拖到25th div附近,它应该自动滚动以显示剩余的div。我该怎么做在jquery?任何想法?

I am using Nestable not draggable()

我正在使用Nestable而不是draggable()

4 个解决方案

#1

This will need some fine tuning depending on your specific use case but it seems to work fairly well.

这将需要一些微调,具体取决于您的具体用例,但它似乎工作得相当好。

Working Example

$('.dd').nestable({ /* config options */
});

$(window).mousemove(function (e) {
    var x = $(window).innerHeight() - 50,
        y = $(window).scrollTop() + 50;
    if ($('.dd-dragel').offset().top > x) {
        //Down
        $('html, body').animate({
            scrollTop: 300 // adjust number of px to scroll down
        }, 600);
    }
    if ($('.dd-dragel').offset().top < y) {
        //Up
        $('html, body').animate({
            scrollTop: 0
        }, 600);
    } else {
        $('html, body').animate({

        });
    }
});

Related API documentation:

#2

If you want to know bottom of window you can check

如果你想知道窗口的底部,你可以检查

$(window).height()

and $(window).scrollTop();

#3

I know this is an old topic but since this feature keeps in standby, I just improved apaul34208's code, hope it helps

我知道这是一个老话题,但由于这个功能保持待机状态,我只是改进了apaul34208的代码,希望它有所帮助

$(window).mousemove(function (e) {
    if ($('.dd-dragel') && $('.dd-dragel').length > 0 && !$('html, body').is(':animated')) {
        var bottom = $(window).height() - 50,
            top = 50;

        if (e.clientY > bottom && ($(window).scrollTop() + $(window).height() < $(document).height() - 100)) {
            $('html, body').animate({
                scrollTop: $(window).scrollTop() + 300
            }, 600);
        }
        else if (e.clientY < top && $(window).scrollTop() > 0) {
            $('html, body').animate({
                scrollTop: $(window).scrollTop() - 300
            }, 600);
        } else {
            $('html, body').finish();
        }
    }
});

#4

A bit of an improvement on Mencey's code. A caveat it might have is that it's based on an interval fired every 16 milliseconds instead of mousemove(). I don't know how taxing this may be, so feel free to increase the number of milliseconds or fire a clearInterval at some point. The benefit from this is the scrolling is continuous, instead of having to wiggle the mouse as 1j01 pointed out.

Mencey的代码有点改进。它可能有一个警告,它是基于每16毫秒而不是mousemove()触发的间隔。我不知道这可能是多么费力,所以请随意增加毫秒数或在某个时刻触发clearInterval。这样做的好处是滚动是连续的,而不是像1j01指出的那样摆动鼠标。

You may also change the speed and zone variables, zone being an area in pixels at the top and the bottom of the window where you can drag the item. As you get closer to the top or the bottom of the window, the scrolling speed goes up as it compares the distance between the position of the mouse and the actual edge of the window, giving some control to the user on the scrolling speed.

您还可以更改速度和区域变量,区域是窗口顶部和底部的像素区域,您可以在其中拖动项目。当您靠近窗口的顶部或底部时,滚动速度会上升,因为它会比较鼠标位置与窗口实际边缘之间的距离,从而在滚动速度上为用户提供一些控制。

var mouseY;
var speed = 0.15;
var zone = 50; 

$(document).mousemove(function(e){
   mouseY = e.pageY - $(window).scrollTop();
}).mouseover();

var dragInterval = setInterval(function(){

  if ($('.dd-dragel') && $('.dd-dragel').length > 0 && !$('html, body').is(':animated')) {
    var bottom = $(window).height() - zone;

  if (mouseY > bottom && ($(window).scrollTop() + $(window).height() < $(document).height() - zone)) {
    $('html, body').animate({scrollTop:  $(window).scrollTop() + ((mouseY + zone - $(window).height()) * speed)},0);
  }
  else if (mouseY < zone && $(window).scrollTop() > 0) {
     $('html, body').animate({scrollTop: $(window).scrollTop() + ( (mouseY - zone) * speed) },0);

  } else {
     $('html, body').finish();
  }
  }
},16);

#1