モバイルデバイスの画面から要素をドラッグしないようにします

Question

ドラッグ可能な要素があります。ユーザーがページの一番上にある場合、要素（div）は上から50ピクセルを取得するとドラッグを停止します（ユーザーが一番下までスクロールしている場合は下も同じです）。

問題：ページダウンユーザーがスクロールがほんの少し、その後のdivがビューの外にドラッグすることができます。私はそれが上から下から見えなくなる前に止めることを望みます。写真の携帯電話の画面では、画面の右側にある小さなボックスを上下にドラッグすることはできますが、ページを上/下にスクロールしても、枠を外にドラッグすることはできません。

私は、ページをスクロールしてからドキュメントの高さなどから差し引くかどうかを判断する必要があることは分かっています。それとも、私が知りませんより良い解決策があります。ここで

y軸に沿ったdivのドラッグを作ること私がこれまで持っているものです。

ソリューションが見つかり

this.makeDraggable = function(){ 
     var docHeight = $(document).height(); 
     var winHeight = $(window).height(); 

     if(eventSupported('touchstart')){ 
      el.addEventListener("touchmove", handleMove, false); 
     } 

     function handleMove(e) { 
      e.preventDefault(); 
      var y = e.changedTouches[0].pageY; 
      var bottom = winHeight - y; 

      if(bottom > 50 && y > 50) 
      $el.offset({ 
       top: y 
      }); 
     } 
    } 

Answer 1

：

this.makeDraggable = function(){ 
     var docHeight = $(document).height(); 
     var winHeight = $(window).height(); 

     if(eventSupported('touchstart')){ 
      el.addEventListener("touchmove", handleMove, false); 
     } 

     function handleMove(e) { 
      e.preventDefault(); 

      var winScroll = $(window).scrollTop(); // scrolled away from top 
      var y = e.changedTouches[0].pageY; 
      var top = winScroll + 50; 
      var bottom = winScroll + winHeight - 50; 

      if(bottom > y && y > top) 
      $el.offset({ 
       top: y 
      }); 
     } 
    } 

$（ウィンドウ）.scrollTop（）+を$（window）.height（）は常に "window"の一番下になります。