Question

在iPad Safari（以及桌面Safari和Chrome）上，我需要在垂直滚动的页面上放置水平滑块，滑块不会被意外移动。不幸的是，jQuery移动滑块确实可以响应iPad上的（不完美）垂直滑动。

解决此问题的一个好方法是设置滑块，以便移动旋钮的唯一方法是按住然后拖动。这是我一起攻击的内容（注意：这只适用于触摸界面）：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
div.input-container {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
</head>
<body>

<div id="top">
    <div>
        <h1>Sliders for iPad</h1>
    </div>
    <div>
        <label for="test1">Test:</label>
        <div class="input-container">
            <input type="range" name="test1" value="50" min="0" max="100" disabled>
        </div>
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div>
        <label for="test2">Test:</label>
        <div class="input-container">
            <input type="range" name="test2" value="50" min="0" max="100" disabled>
        </div>
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div>
        <label for="test3">Test:</label>
        <div class="input-container">
            <input type="range" name="test3" value="50" min="0" max="100" disabled>
        </div>
    </div>
</div>

<script>
$(function() {

$(".input-container").addClass("disable-drag")
    .on("taphold", tapholdHandler)
    .on('touchmove', moveHandler)
    .on('touchend', endHandler)
;

function moveHandler(event) {
    var containingDiv = $(".input-container");
    if (!containingDiv.hasClass('disable-drag')) {
        ///
        console.log(event);
        $('a').offset({left: event.originalEvent.targetTouches[0].clientX});
        var left = 68;///parseInt($('.ui-slider-track')[0].css('margin-left'));
        var w = event.originalEvent.target.offsetWidth - left;
        var percent = ((event.originalEvent.targetTouches[0].clientX - left) / w) * 100;
        $('input').val(percent).slider('refresh');
        ///
    }
}

function tapholdHandler(event) {
    console.log(event)
    var containingDiv = $(".input-container");
    if (containingDiv.hasClass('disable-drag')) {
        containingDiv.removeClass("disable-drag");
        event.preventDefault();
        event.stopPropagation();
        $('input').slider('enable').slider('refresh');
    }
}

function endHandler(event) {
    $('input').slider('disable').slider('refresh');
    $(".input-container").addClass("disable-drag")
}

});
</script>
</body>
</html>

滑块被禁用，直到检测到按下按钮，此时它会弹起，在用户拖动时更新旋钮位置和值，并在触摸结束时返回到禁用状态。它有点工作，但太脆了，我不想做滑块已经做的基本相同的计算。在///标记之间，我真正喜欢的是以编程方式单击当前鼠标位置，以便旋钮移动到该位置 - 而不会中断按住 - 拖动手势。这可能吗？这是我尝试的但是它不起作用：

///
$(".ui-slider-track").trigger('click'); //todo: narrow the selector to the target slider
///

和

///
$(document.elementFromPoint(event.originalEvent.targetTouches[0].clientX, event.originalEvent.targetTouches[0].clientY)).click();
///

...还是有其他一些移动UI库，滑块不响应垂直滑动？

Answer 1

好的，我想出了一个相当干净的简单解决方案。在iPad Safari上测试。它还保持文本字段的启用，以便可以直接编辑。

textarea

限制jQuery Mobile滑块以响应按住 - 拖动

1 个答案: