0

我正在尝试拖动框，这会改变复选框的状态，机器人这不是我现在想要做的，我试图达到我的 div 不作为背景图像拖动。Div 必须不是背景图像，可以添加背景图像。

(function($){
$.fn.slideCheckbox = function(){

    return this.each(function(){

        //init, native js for better performance
        slidesHolder = document.createElement( 'div' );
        slidesHolder.setAttribute( 'class', 'slides_holder' );
        slides = document.createElement( 'div' );
        slides.setAttribute( 'class', 'slides' );
        slidesHolder.appendChild( slides );

        slide_on = document.createElement( 'div' );
        slide_on.setAttribute( 'class', 'slide_on' );
        slide_off = document.createElement( 'div' );
        slide_off.setAttribute( 'class', 'slide_off' );
        slides.appendChild( slide_on );
        slides.appendChild( slide_off );
        this.parentNode.insertBefore( slidesHolder, this.nextSibling );

        // mouse hold and position
        var down = false;
        var clickPos = null;

        $( slidesHolder ).bind({

            mousedown : function( e ){

                clickPos = e.pageX;
                down = true;
            },
            mousemove : function( e ){
                if ( !down ) return;

                // slinkimas i desine
                if ( clickPos < e.pageX ) {

                    $( slides ).offset({ left: e.pageX - clickPos });
                }

                // slinkimas i kaire
                if ( clickPos > e.pageX ) {

                    $( slides ).offset({ left: e.pageX - clickPos  });
                }

            },
            mouseup : function(){

                down = false;
            }
        });
    });
}
 })(jQuery);

$(function(){

     $( '#slide_checkbox' ).slideCheckbox();
});

完整示例如下：

http://jsfiddle.net/GomatoX/w2DBU/

4

1 回答 1

0

如果你已经在使用 jquery 为什么不使用这样的东西呢？

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(document).ready(function() {
    $( "#slider" ).slider({ max: 1 });
    $( "#slider" ).bind( "slidechange", function(event, ui) {
    document.getElementById('slide_checkbox').checked=$(this).slider("option","value");
    });

});
</script>
</head>
<body>
<label for="slide_checkbox">Slider Checkbox</labeL>
    <input type="checkbox" value="" name="" id="slide_checkbox" />
<div id="slider"></div>
</body>
</html>​

http://jsfiddle.net/q3hBj/

于 2012-10-31T13:28:22.647 回答