Question

我使用jQuery，CSS和HTML构建了一个iOS样式开关。

此时它会在点击时触发。我想保持点击功能，但也希望能够拖动它。如果没有插件，这是否可行？如何做到这一点。

没有拖动功能的工作示例。 http://jsfiddle.net/buduR/5/

JS。

$(document).ready(function(){
    $('.element.switch').each(function(){
        $(this).css('width',($(this).find('li:first').width() + 40) + 'px');
        $(this).find('span').css('left',($(this).find('li:first').width() + 18) + 'px')
        $(this).find('li:last').css('left',($(this).find('li:first').width() + 30) + 'px').css('text-align','right');
        if($(this).find('li:first').attr('data-val') == $(this).find('input').val()){ $(this).find('ol').css('left',0); }
        else { $(this).find('ol').css('left','-' + ($(this).find('li:first').width() + 20) + 'px'); }
    });

    $('.element.switch').click(function(){
        if($(this).find('li:first').attr('data-val') == $(this).find('input').val()){
            $(this).find('ol').animate({left:- ($(this).find('li:first').width() + 20)},500);
            $(this).find('input').val($(this).find('li:last').attr('data-val'));
        }
        else {
            $(this).find('ol').animate({left:0},500);
            $(this).find('input').val($(this).find('li:first').attr('data-val'));
        }
    });
});

Answer 1

是的，有可能，jquery有自己的拖拽pugin，但你需要使用jquery_ui.min

使用这段代码

$(".drag").draggable({
    axis: "x",
    cursor: "move",
    containment: "parent",
    start: function(event, ui) {
        // do stuff when you start drag
    },
    stop: function(event, ui) {
        // do stuff when you finish drag
    }
});

你可以让课程“拖动”成为可拖动的，所以如果你不得不跨越class =“drag”那么你只需要工作css

这是JsFiddle

修改

我已经更新了JsFiddle，现在它加载了jquery.ui.touch-punch并且它在IOS上工作（在jsfiddle它不会因为jsfiddle工作的方式，但在它之外）。此外，我已将包含选项添加到draggable中，因此它现在保留在ol。
中

Answer 2

jQuery .draggable可能无法在ios上运行，您可以查看以下内容：

看看这个：https://github.com/furf/jquery-ui-touch-punch

你也可能对jQuery Mobile感兴趣。

编辑：

我不知道我是否正确地阅读了您的问题，如果您只是想在网络浏览器中模拟ios风格的UI，jquery .draggable可以正常工作，但是如果您希望它在美孚触摸屏上运行，使用我提供的链接

jQuery'iOS style'切换按钮需要可拖动功能

2 个答案: