不使用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>