0

我已经使用 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'));
        }
    });
});
4

2 回答 2

0

是的，有可能，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
    }
});

您可以使类“拖动”成为可拖动的，因此如果您必须跨越类 =“拖动”，那么您只需要使用 css

这是JsFiddle

编辑

我已经更新了 JsFiddle，现在它加载了 jquery.ui.touch-punch 并且它确实可以在 IOS 上工作（在 jsfiddle 中它不是因为 jsfiddle 的工作方式，但在它之外）。此外，我还向可拖动对象添加了包含选项，因此它现在保留在 ol.

于 2012-09-01T17:23:52.237 回答
0

jQuery .draggable 可能不适用于 ios ，您可以查看以下内容：

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

您也可能对jQuery Mobile感兴趣。

编辑：

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

于 2012-09-01T18:21:06.123 回答