jQueryをタップしてドラッグしてコンテンツをスクロールする

こんにちは、jQuery、再び！



このプラグインのタスクは 、タッチしてドラッグすることでコンテンツをスクロールすることです。



使用されるイベントはmousedown / move / upです。 デフォルトでは、このイベントチェーンはタッチ内のコンテンツを選択します。



実装 -痛々しいほどよく知られているオーバーフロー：hidden 、要素のコンテンツをラップし、コンテンツを内部に移動する



未解決の問題

1.場合によっては、下端と5倍の減速の交点の境界で、コンテンツは一定の間隔で上に移動します。 逆方向の移動中（この線を越える瞬間）に、コンテンツがその場所に戻る（下に移動する）ことは注目に値します。



誰かがこの記事が役に立つと、その応用を見つけることを願っています。

コメントにようこそ、私はあなたの考え、建設的で否定的な、このコードを改善することを目的とするすべてを待っています！



jsFiddleのテストベンチ （52行のコメントなしのコード）。



マークアップから始めましょう。 コンテンツを含むブロックがあります：

<div id="content"> <h2>Touch and drag content</h2> <p>Lorem ipsum dolor sit amet...</p> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 #content { position:absolute; left:50px; top:50px; width:500px; height:350px; text-align:justify; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次は、各アクションの詳細な解説です。

 //      (function($){ //       $.fn.touchanddrag = function(){ //       ,     //        ,    css this.wrapInner('<div>'); //     ,    -     //     (box) - ,    (data) -  var box = this, data = this.children(); //    box.css({overflow:'hidden'}); //   data data.css({position:'absolute',cursor:'default'}); //     data.mousedown(function(e){ //      var hgtBox = box.height(), hgtData = data.height(); // ,      if (hgtData>hgtBox) { //   var posTap = e.pageY, //   data   box posData = data.position().top, posShift, //      mouseMove = function(e){ // ,      if (e.which==1){ // ,     posShift = e.pageY-posTap; //       if (data.position().top>0){ //  ,   5   //     data.css({top:(posData+posShift)/5}); //       } else if ((data.position().top+hgtData)<hgtBox){ //      data.css({top:(hgtBox-hgtData)+(posShift/5)}); //       } else { //      data.css({top:posData+posShift}); } } else { mouseUp(); } }, //   mouseUp = function(){ //       $(document).off('mousemove',mouseMove).off('mouseup',mouseUp); $(document).off('mousedown',selection); //    data.css({cursor:'default'}); //         if (data.position().top>0){ //        //     data.animate({top:0},250); //         } else if ((data.position().top+hgtData)<hgtBox) { //        data.animate({top:hgtBox-hgtData},250); } }, //      selection = function(){ if (window.getSelection){window.getSelection().removeAllRanges()} else {document.selection.empty()} return false; }; //       data.css({cursor:'move'}); //       $(document).on('mousedown',selection).on('mousemove',mouseMove); $(document).on('mouseup',mouseUp).on('contextmenu',mouseUp); $(window).on('blur',mouseUp); } }); return this; }; })(jQuery);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プラグインを呼び出します：

 $('#content').touchanddrag();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

UPD 1-フレームの外でマウスボタンを放したときにコンテンツがスクロールし続けるバグを修正しました。 チェックを追加しました

 if (e.which==1)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

UPD 2 -CSSオブジェクトのキーのキャッシュを削除

 data.css({cursor:'move'})