jQueryを使用しないHTML5ドラッグ可能なコントロール

Question

私は誰かが私を助けてくれることを望んでいる問題があります。 私はスライダーのソートにHTMLとCSSを作成しました：ここ

<div class="pk-slider"> 
    <div class="pk-slider-base"> 
     <div> 
      <div class="pk-slider-point">     
       <p class="pk-label">Family holidays</p>     
       <a href="#"> 
        <div class="point"></div> 
       </a> 
      </div> 

      <div class="pk-slider-point">     
       <p class="pk-label">Sporting activities</p>     
       <a href="#"> 
        <div class="point"></div> 
       </a> 
      </div> 

      <div class="pk-slider-point">     
       <p class="pk-label">Travel</p>     
       <a href="#"> 
        <div class="point"></div> 
       </a> 
      </div> 

      <div class="pk-slider-point">     
       <p class="pk-label active">Photography is my passion</p>     
       <a href="#"> 
        <div class="point active"></div> 
       </a> 
      </div> 

      <div class="pk-slider-point">     
       <p class="pk-label">Nights out</p>     
       <a href="#"> 
        <div class="point"></div> 
       </a> 
      </div> 

      <div class="pk-slider-point">     
       <p class="pk-label">Special occasions</p>     
       <a href="#"> 
        <div class="point"></div> 
       </a> 
      </div> 

      <div class="pk-slider-point">     
       <p class="pk-label">Family holidays</p>     
       <a href="#"> 
        <div class="point"></div> 
       </a> 
      </div> 

     </div> 
    </div> 
</div> 

は、あなたがそれを見ることができるようにcodepen上の例です。今

http://codepen.io/r3plica/pen/XKzWZa?editors=1101#0

、私はボタンがすでに取り組んでいる（ので、私はそれらをクリックすると、彼らはアクティブなクラスをアニメーション）。

私はjQueryのを使用せずにこれを実行できるようにする必要があり

、誰もが持っているん：それは左に移動し、右のようになるように、私がやりたい何 は、全体のコントロールをドラッグできるようにすることですどのように私はそれについて行くかもしれない任意のアイデア？

Answer 1

自分でローリングするときの問題の多くは、マウスドラッグイベントを処理し、偶発的なクリックを防ぎ、ドラッグされた場所を追跡することです。 transform: translateX();を使用して、CSS経由での移動を実現できます。

私は純粋なHTML5を使ってローグライクゲームを作るの周りにプレイしていたとき、私は純粋なJavaScriptでマウスドラッグでの回転のためにしばらく前にこのような何かをした：

https://dl.dropboxusercontent.com/u/12933950/gridTest/grid.html

を（私は後で幸いにも、いくつかのjQueryを追加しました私はJSでマウスの回転をした）。

何らかの理由で私はあなたの解決策に合うように1時間を費やす衝動を感じました。私はあなたに指示を与え、それを残したが、それが機能していることを確認したいと思っていた。そして、最初のjavascriptプロジェクトの1つが実際に誰かに利益をもたらすのはうれしい。

ボタンのtransformを画面の中央に近づけて使用するなど、必要に応じてこの方法を修正する必要があります（この方法はまったく問題ありません）。スピードをwindow.innerWidthに変更することで1：1の動き/マウス速度）、それであなたが遊ぶためにそこにすべてを投げ込むことは害ではないと思う。私はPK-スライダーベースにIDを追加しましたが、残りはすべてのjs変更した

http://codepen.io/jackarbiter/pen/jAaPAQ?editors=1111

注意。

私の古いソリューションが携帯電話でドラッグに使用されていたかどうかはわかりません - 多くの人がjQuery-UIを使用している理由の1つは、マウスイベントに必要な機能を実行し、それで済ませてください。

また、何が起こっているのかを説明するコメントがありますが、完全にコメントされていない（私は当時はそれが悪かった）ので、ご不明な点がありましたら教えてください。細かいjQueryの、なし

var started = 0, 
 
     xOff = 0, 
 
     oldX = 0, 
 
     pageX = 0, 
 
     yourTrans = "", 
 
     dragData = 0, 
 
     downTime = 0, 
 
     finalX = 0, 
 
     mySpeed = window.innerWidth, 
 
     yourElement = document.getElementById('pk-slider-base'); 
 

 
    function updateView() { 
 
     "use strict"; 
 
     finalX = pageX * mySpeed; 
 
     yourTrans = 'translateX(' + finalX + 'px)'; 
 
     yourElement.style.transform = yourTrans; 
 
    } 
 

 
    function setDrag() { 
 
     "use strict"; 
 
     if (dragData === 0) { 
 
     dragData = 1; 
 
     } 
 
    } 
 

 
    function startDrag(ev) { 
 
     "use strict"; 
 
     downTime = window.setTimeout(setDrag, 100); 
 
     ev.preventDefault(); 
 
    } 
 

 
    function drag(ev) { 
 
     "use strict"; 
 
     if (dragData === 1) { 
 

 
     if (started === 0) { 
 
      //offset initial start position to result in 0 
 
      xOff = (ev.clientX/window.innerWidth); 
 
      //initial position (first drag) or last position 
 
      oldX = pageX; 
 
      started = 1; 
 
     } 
 
     pageX = ((ev.clientX/window.innerWidth) - xOff) + oldX; 
 
     //set new offset or the position will exponentially increase 
 
     xOff = (ev.clientX/window.innerWidth); 
 
     updateView(); 
 
     oldX = pageX; 
 
     } 
 
    } 
 

 
    function stopDrag(ev) { 
 
     "use strict"; 
 
     window.clearTimeout(downTime); 
 
     if (dragData === 1) { 
 
     dragData = 0; 
 
     } 
 
     //setup for next drag 
 
     started = 0; 
 
    } 
 

 
    window.addEventListener('mousedown', startDrag, false); 
 
    window.addEventListener('mousemove', drag, false); 
 
    window.addEventListener('mouseup', stopDrag, false); 
 

 
    updateView();

.pk-slider { 
 
    height: 100px; } 
 
    .pk-slider .pk-slider-base { 
 
    height: 1px; 
 
    background-color: #c8cfd9; 
 
    margin-top: 55px; 
 
    margin-bottom: 10px; 
 
    width: 10000px; 
 
    margin-left: -5000px; 
 
    text-align: center; } 
 
    .pk-slider .pk-slider-base > div { 
 
     display: inline-block; } 
 
    .pk-slider .pk-slider-base .pk-slider-point { 
 
     height: 50px; 
 
     width: 50px; 
 
     float: left; 
 
     text-align: center; 
 
     margin-top: -25px; 
 
     margin-left: 200px; 
 
     margin-right: 200px; 
 
     position: relative; } 
 
     .pk-slider .pk-slider-base .pk-slider-point > a { 
 
     display: block; 
 
     height: 50px; 
 
     width: 50px; } 
 
     .pk-slider .pk-slider-base .pk-slider-point .point { 
 
     display: block; 
 
     float: left; 
 
     text-align: center; 
 
     margin: 16px; 
 
     height: 18px; 
 
     width: 18px; 
 
     line-height: 18px; 
 
     border-radius: 9px; 
 
     background-color: #c8cfd9; 
 
     -webkit-transition: all 0.5s ease; 
 
     /* Safari */ 
 
     transition: all 0.5s ease; } 
 
     .pk-slider .pk-slider-base .pk-slider-point .point.active { 
 
      height: 50px; 
 
      width: 50px; 
 
      line-height: 50px; 
 
      border-radius: 25px; 
 
      background-color: #3f4c5f; 
 
      margin: 0; } 
 
     .pk-slider .pk-slider-base .pk-slider-point .pk-label { 
 
     z-index: -1; 
 
     position: absolute; 
 
     text-align: center; 
 
     width: 1000px; 
 
     top: 38px; 
 
     left: -475px; 
 
     color: #c8cfd9; 
 
     -webkit-transition: all 0.5s ease; 
 
     /* Safari */ 
 
     transition: all 0.5s ease; } 
 
     .pk-slider .pk-slider-base .pk-slider-point .pk-label.active { 
 
      top: 50px; 
 
      color: #3f4c5f; }

<div class="pk-slider"> 
 
    <div class="pk-slider-base" style="margin-left: -4100px;" id="pk-slider-base"> 
 
     <div> 
 
      <div class="pk-slider-point">     
 
       <p class="pk-label">Family holidays</p>     
 
       <a href="#"> 
 
        <div class="point"></div> 
 
       </a> 
 
      </div> 
 
      
 
      <div class="pk-slider-point">     
 
       <p class="pk-label">Sporting activities</p>     
 
       <a href="#"> 
 
        <div class="point"></div> 
 
       </a> 
 
      </div> 
 
      
 
      <div class="pk-slider-point">     
 
       <p class="pk-label">Travel</p>     
 
       <a href="#"> 
 
        <div class="point"></div> 
 
       </a> 
 
      </div> 
 
      
 
      <div class="pk-slider-point">     
 
       <p class="pk-label active">Photography is my passion</p>     
 
       <a href="#"> 
 
        <div class="point active"></div> 
 
       </a> 
 
      </div> 
 
      
 
      <div class="pk-slider-point">     
 
       <p class="pk-label">Nights out</p>     
 
       <a href="#"> 
 
        <div class="point"></div> 
 
       </a> 
 
      </div> 
 
      
 
      <div class="pk-slider-point">     
 
       <p class="pk-label">Special occasions</p>     
 
       <a href="#"> 
 
        <div class="point"></div> 
 
       </a> 
 
      </div> 
 
      
 
      <div class="pk-slider-point">     
 
       <p class="pk-label">Family holidays</p>     
 
       <a href="#"> 
 
        <div class="point"></div> 
 
       </a> 
 
      </div> 
 
      
 
     </div> 
 
    </div> 
 
</div>