不使用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制作類似rogue的游戲時，我做過類似的事情，以便在純JavaScript中進行鼠標拖動的旋轉：

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

（我稍后添加了一些jQuery，但幸運的是我在JS中進行了鼠標旋轉）。

由於某種原因，我感到花時間將其安裝到您的解決方案中的沖動。 我會給您一個方向，並留在那兒，但我想確保它能正常工作，這對我的第一個javascript項目真正使某人受益是很好的。

您可能需要根據自己的需要解決此問題（如果這種方法對您完全有用），例如在按鈕接近屏幕中間時對它們進行transform （我編輯了1：1移動的答案） / mouse speed（將速度更改為window.innerWidth），因此我認為將其全部扔給您玩沒有什么害處。

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

請注意，我在pk-slider-base中添加了一個ID，但是剩下的就是所有js更改。

我不記得我的舊解決方案是否可以在手機上進行拖動-很多人使用jQuery-UI的原因之一是，他們可以執行鼠標事件所需的操作，然后為移動設備添加觸摸打孔並完成操作。

另外，它有一些注釋可以解釋發生了什么，但沒有完全注釋（當時我對此很不好），因此，如果您有任何問題，請告訴我。

  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>