div拖動不作為背景

Question

我正在嘗試執行拖動框，該操作會更改復選框的狀態，這不是我現在想要完成的任務，而是試圖使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/

Answer 1

如果您已經在使用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/

div拖動不作為背景

問題描述

1 個解決方案

解決方案1
0 2012-10-31 13:28:22

div拖動不作為背景

問題描述

1 個解決方案

解決方案1 0 2012-10-31 13:28:22

解決方案1
0 2012-10-31 13:28:22