javascript - 当鼠标快速移动时,在 JQUERY 中自定义拖动 div 无法正常工作

标签 javascript jquery html css

我正在尝试设计一个自定义滚动条,只有当鼠标移动缓慢时我才能做到这一点,如果鼠标移动很快,“条”就会离开滚动区域。 这是我的 fiddle : http://jsfiddle.net/ghufranne/ydz2hpm0/22/

        var $body = $('body');
        var $target = null;
        var isDraggEnabled = false;

        var posY=0;
        $body.on("mousedown", "#bar", function(e) {

            $this = $(this);

    if(e.offsetX==undefined){

                    y = e.pageY-$(this).offset().top;
                }else{

                    y = e.offsetY;
                };

            $('#scrollRegion').offset({
                top:currTop+y});    
            $target = $(e.target);
           e.preventDefault();

        });

         $body.on("mouseup", function(e) {
            $target = null;
         });
        var bottomScrollLock=false;
        var topScrollLock=false;
     $body.find("#scroll").on("mousemove", function(e) {
            if ($target) {
              var pos= $target.offset(); 

         if(bottomScrollLock && e.pageY<posY){

                    bottomScrollLock=false;

                }

           if(topScrollLock && e.pageY>posY){

                    topScrollLock=false;

                }

         if(pos.top<scrollPos.top )
         {
             posY=e.pageY;
             topScrollLock=true;


         }
         if((pos.top+heightOfBar-scrollHeight)> scrollPos.top){
             posY=e.pageY;
             bottomScrollLock=true;

         }       

    noOfElToScroll = parseInt(pos.top-e.pageY+y);

                  $("#drag").text(noOfElToScroll);
 if(!bottomScrollLock && noOfElToScroll<0 ){

                $target.offset({
                    top: e.pageY -y
                });
     for(var i=0;i<1;i++){
$drop.find('li:last').after("<li>value "+(lastVisible++)+"</li>");   
      $drop.find('li:first').remove();
         firstVisible++;}
                }
   if(noOfElToScroll>0 &&!topScrollLock){

                $target.offset({
                    top: e.pageY -y
                });
    $("#drag").text($('#bar').offset().top);
  $drop.find('li:first').before("<li>value "+(firstVisible--)+"</li>");   
     $drop('li:last').remove();
     lastVisible--;
                }  

            };     
         });

如果我使用 Draggable 工作,它会工作得很好。 但是我不想用,我想学。

最佳答案

firstsecond chart .该因素称为 Jquery

关于javascript - 当鼠标快速移动时,在 JQUERY 中自定义拖动 div 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26134652/

相关文章:

javascript - 无法使用innerHTML方法更新另一个div元素内的div?

javascript - Node 静态 js 文件不刷新

javascript - 未捕获的类型错误 : Cannot read property 'transitionDuration' of undefined

javascript - JQuery 问题 "TypeError: $.getJSON is not a function"

javascript - 强制页面的一部分进入 IE7 兼容模式

javascript - 从 IE 上的日期获取时区字符串

php - 在 AJAX 成功时显示成功消息

javascript - 如何更改电子邮件的 html5 模式错误消息

html - CSS仅更改子菜单的背景颜色

javascript - 重复相同数字 y 次的函数