6

div内でマウスをクリックして押したまま、背景を移動できるようにしたいと思います。グーグルでたくさん検索しましたが、欲しいものが見つかりませんでした。

これがターゲットです（表示されるマップはドラッグするオブジェクトです）：http：//pontografico.net/pvt/gamemap/

任意のヒント？

乾杯！

4

4 に答える 4

18

了解しました。これを機能させました。私はすべてのねじれを取り除いたと思います：

境界制限のある最終的なjQuery

$(document).ready(function(){
    var $bg = $('.bg-img'),
        elbounds = {
            w: parseInt($bg.width()),
            h: parseInt($bg.height())
        },
        bounds = {w: 2350 - elbounds.w, h: 1750 - elbounds.h},
        origin = {x: 0, y: 0},
        start = {x: 0, y: 0},
        movecontinue = false;

    function move (e){
        var inbounds = {x: false, y: false},
            offset = {
                x: start.x - (origin.x - e.clientX),
                y: start.y - (origin.y - e.clientY)
            };

        inbounds.x = offset.x < 0 && (offset.x * -1) < bounds.w;
        inbounds.y = offset.y < 0 && (offset.y * -1) < bounds.h;

        if (movecontinue && inbounds.x && inbounds.y) {
            start.x = offset.x;
            start.y = offset.y;

            $(this).css('background-position', start.x + 'px ' + start.y + 'px');
        }

        origin.x = e.clientX;
        origin.y = e.clientY;

        e.stopPropagation();
        return false;
    }

    function handle (e){
        movecontinue = false;
        $bg.unbind('mousemove', move);

        if (e.type == 'mousedown') {
            origin.x = e.clientX;
            origin.y = e.clientY;
            movecontinue = true;
            $bg.bind('mousemove', move);
        } else {
            $(document.body).focus();
        }

        e.stopPropagation();
        return false;
    }

    function reset (){
        start = {x: 0, y: 0};
        $(this).css('backgroundPosition', '0 0');
    }

    $bg.bind('mousedown mouseup mouseleave', handle);
    $bg.bind('dblclick', reset);
});

http://jsfiddle.net/userdude/q6r8f/4/

元の回答

HTML

<div class="bg-img"></div>

CSS

div.bg-img {
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/9/91/Flexopecten_ponticus_2008_G1.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-color: blue;
    border: 1px solid #aaa;
    width: 250px;
    height: 250px;
    margin: 25px auto;
}

jQuery

$(document).ready(function(){
    var $bg = $('.bg-img'),
        origin = {x: 0, y: 0},
        start = {x: 0, y: 0},
        movecontinue = false;

    function move (e){
        var moveby = {
            x: origin.x - e.clientX,
            y: origin.y - e.clientY
        };

        if (movecontinue === true) {
            start.x = start.x - moveby.x;
            start.y = start.y - moveby.y;

            $(this).css('background-position', start.x + 'px ' + start.y + 'px');
        }

        origin.x = e.clientX;
        origin.y = e.clientY;

        e.stopPropagation();
        return false;
    }

    function handle (e){
        movecontinue = false;
        $bg.unbind('mousemove', move);

        if (e.type == 'mousedown') {
            origin.x = e.clientX;
            origin.y = e.clientY;
            movecontinue = true;
            $bg.bind('mousemove', move);
        } else {
            $(document.body).focus();
        }

        e.stopPropagation();
        return false;
    }

    function reset (){
        start = {x: 0, y: 0};
        $(this).css('backgroundPosition', '0 0');
    }

    $bg.bind('mousedown mouseup mouseleave', handle);
    $bg.bind('dblclick', reset);
});

http://jsfiddle.net/userdude/q6r8f/2/

于 2012-06-30T06:44:35.427 に答える
3

UIドラッグ可能デモから：

DOM要素のドラッグは簡単で、車輪の再発明をする必要はありません。

<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
    $(function() {
        $( "#draggable" ).draggable();
    });
</script>



<div class="demo">

<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>

</div><!-- End demo -->



<div class="demo-description" style="display: none; ">
<p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p>
</div><!-- End demo-description -->

http://jqueryui.com/demos/draggable/

編集：div内のドラッグ可能な背景も可能です。ここでフィドルを参照してください：http：//jsfiddle.net/FyFZA/

于 2012-06-30T05:54:44.063 に答える
0

この投稿は私の問題の優れた出発点でした。上記の回答と、背景画像の元のサイズの取得に関する別の回答を組み合わせました（SO：jQueryで背景画像のサイズを取得するにはどうすればよいですか？）

私が使用していた特定の設定background-size:coverでは、背景画像の高さ/幅の比率を決定し、それをコンテナの高さ/幅の比率と比較する必要がありました。これは、各画像が1次元でのみスライドできることを意味します。

ここに2つの追加機能が必要ない場合があります。見やすくするために、現在操作している要素に境界線を追加し、作業が終わったら削除しました。また、オフセット値で入力を更新したので、それらをサーバーに送信できました。

コメントは非常に冗長になる傾向があるので、少し長いですが、誰かに役立つことを願っています。

<script>
$(document).ready(function(){

    function reset (){
        start = {x: 0, y: 0};
        $(this).css('backgroundPosition', '0 0');
    }

    $(".bg-img").bind('dblclick', reset);

    //my jquery
$(".bg-img").on('mousedown mouseup', function(e){

    //declare some vars
    var start = {x: 0, y: 0};
    var move = {x: 0, y: 0};
    var id = $(this).attr('id');

    //pointer coordinates on mousedown
    var origin = {x: 0, y: 0};

    //container dimensions
    var container = {w: $(this).width(), h: $(this).height()};

    //container ratio
    var containerRatio = container.h / container.w;

    //background image dimensions, note: this gets dimensions of unscaled image
    var img = new Image;
    img.src = $(this).css('background-image').replace(/url\(|\)$/ig, "");
    var background = {w: img.width, h: img.height};

    //background ratio
    var backgroundRatio = background.h / background.w;

    //max x and y position, aka boundary
    var min = {x: 0, y: 0};
    var max = {x: 0, y: 0};

    //move x
    if(backgroundRatio < containerRatio){
        min.y = 0;
        min.x = -((container.h * (1/backgroundRatio)) - container.w);
    }

    //move y
    else if (backgroundRatio > containerRatio){
        min.x = 0;
        min.y = -((container.w * backgroundRatio) - container.h);
    }

    //ratios are equal, don't move anything
    else{
        min.x = 0;
        min.y = 0;
    }

    //activate
    if(e.type == 'mousedown'){

        //add border so it's easier to visualize
        $(this).css('border', '1px solid #000000');

        //get current position of mouse pointer
        origin.x = e.clientX;
        origin.y = e.clientY;

        //get current background image starting position
        var temp = $(this).css('background-position').split(" ");
        start.x = parseInt(temp[0]);
        start.y = parseInt(temp[1]);

        //mouse is dragged while mousedown
        $(this).mousemove(function(e){

            //move position
            move.x = start.x + (e.clientX - origin.x);
            move.y = start.y + (e.clientY - origin.y);

            //if it's in the bounds, move it
            if(move.x <= max.x && move.x >= min.x && move.y <= max.y && move.y >= min.y){

                console.log('both');

                //alter css
                $(this).css('background-position', move.x + 'px ' + move.y + 'px');

                //update input
                $("#" + id).val('x:' + move.x + ', y:' + move.y);
            }

            //in x bound,
            else if(move.x <= max.x && move.x >= min.x){

                console.log('x');

                //below min.y
                if(move.y < min.y){
                    $(this).css('background-position', move.x + 'px ' + min.y + 'px');

                    //update input
                    $("#" + id).val('x:' + move.x + ', y:' + min.y);
                }
                //above max.y
                else if(move.y > max.y){
                    $(this).css('background-position', move.x + 'px ' + max.y + 'px');

                    //update input
                    $("#" + id).val('x:' + move.x + ', y:' + max.y);
                }
            }

            //in y bound
            else if(move.y <= max.y && move.y >= min.y){

                console.log('y');

                //below min.x
                if(move.x < min.x){
                    $(this).css('background-position', min.x + 'px ' + move.y + 'px');

                    //update input
                    $("#" + id).val('x:' + min.x + ', y:' + move.y);            
                }

                //above max.x
                else if(move.x > max.x){
                    $(this).css('background-position', max.x + 'px ' + move.y + 'px');

                    //update input
                    $("#" + id).val('x:' + max.x + ', y:' + move.y);
                }
            }

            //out of both bounds
            else{
                console.log('problem');
            }
        });
    }

    //deactivate
    else{

        //remove border
        $(this).css('border', 'none');

        //remove mousemove
        $(this).off('mousemove');
        $(document.body).focus();
    }
});
});
</script>
于 2013-10-30T01:31:50.167 に答える
0

これは古い投稿ですが、jQueryUIを使用している場合、別の解決策は、背景の上に透明な要素を作成し、ドラッグコールバックを使用して元のノードのbackgroundPositionを更新することです。次に例を示します。

/* node is the element containing the background image */
/* width/height variables are just there if your background image is a different width/height then the container */
var transparent = $('<div></div>');
transparent.css({
    position: 'absolute',
    zIndex: 10,
    left: node.offset().left,
    top: this.node.offset().top,
    width: width || node.width(),
    height: height || node.height(),
    backgroundColor: '#fff',
    opacity: 0.2
});

$('body').append(transparent);

options.config.drag = function(event, ui) {
    node.css({ backgroundPosition: (ui.position.left - ui.originalPosition.left) + 'px ' + (ui.position.top - ui.originalPosition.top) + 'px' });
};

$(transparent).draggable(options.config);

テスト時に要素が見えるように、意図的に不透明な白い背景色を残しました。

于 2014-09-18T01:18:47.297 に答える