Using Mouse Drag To Control Background Position

问题

I want to use the 'mouse's drag' to drag a background's position around, inside a box.

The css:

.filmmakers #map {

   width : 920px;

   height : 500px;

   margin-top : 50px;

   margin-left : 38px;

   border : 1px solid rgb(0, 0, 0);

   cursor : move;

   overflow : hidden;

   background-image : url('WorldMap.png');

   background-repeat : no-repeat;

}

The html:

<div id = "map" src = "WorldMap.png" onmousedown = "MouseMove(this)"> </div>

The javascript:

function MouseMove (e) {

   var x = e.clientX;

   var y = e.clientY;

    e.style.backgroundPositionX = x + 'px';

    e.style.backgroundPositionY = y + 'px';

    e.style.cursor = "move";

}

Nothing happens, no errors, no warnings, nothing... I have tried lots of things: an absolutely positioned image inside a div (you can guess why that didn't work), A draggable div inside a div with a background image, a table with drag and drop, and finally I tried this:

function MouseMove () {

    e.style.backgroundPositionX = 10 + 'px';

    e.style.backgroundPositionY = 10 + 'px';

    e.style.cursor = "move";

}

This works, but its not relative to the mouse's position, pageX and pageY don't work either.

A live demo: http://jsfiddle.net/VRvUB/224/

P.S: whatever your idea is, please don't write it in JQuery

Cheers!

Mithos

回答1:

From your question I understood you needed help implementing the actual "dragging" behavior. I guess not. Anyway, here's the results of my efforts: http://jsfiddle.net/joplomacedo/VRvUB/236/

The drag only happens when the mouse button, and.. well, it behaves as I think you might want it to. Just see the fiddle if you haven't =)

Here's the code for those who want to see it here:

var AttachDragTo = (function () {
    var _AttachDragTo = function (el) {
        this.el = el;
        this.mouse_is_down = false;

        this.init();
    };

    _AttachDragTo.prototype = {
        onMousemove: function (e) {
            if ( !this.mouse_is_down ) return;
            var tg = e.target,
                x = e.clientX,
                y = e.clientY;

            tg.style.backgroundPositionX = x - this.origin_x + this.origin_bg_pos_x + 'px';
            tg.style.backgroundPositionY = y - this.origin_y + this.origin_bg_pos_y + 'px';
        },

        onMousedown: function(e) {
            this.mouse_is_down = true;
            this.origin_x = e.clientX;
            this.origin_y = e.clientY;
        },

        onMouseup: function(e) {
            var tg = e.target,
                styles = getComputedStyle(tg);

            this.mouse_is_down = false;
            this.origin_bg_pos_x = parseInt(styles.getPropertyValue('background-position-x'), 10);
            this.origin_bg_pos_y = parseInt(styles.getPropertyValue('background-position-y'), 10);
        },

        init: function () {
            var styles = getComputedStyle(this.el);
            this.origin_bg_pos_x = parseInt(styles.getPropertyValue('background-position-x'), 10);
            this.origin_bg_pos_y = parseInt(styles.getPropertyValue('background-position-y'), 10);

            //attach events
            this.el.addEventListener('mousedown', this.onMousedown.bind(this), false);
            this.el.addEventListener('mouseup', this.onMouseup.bind(this), false);
            this.el.addEventListener('mousemove', this.onMousemove.bind(this), false);
        }
    };

    return function ( el ) {
        new _AttachDragTo(el);
    };
})();


/*** IMPLEMENTATION ***/
//1. Get your element.
var map = document.getElementById('map');
//2. Attach the drag.
AttachDragTo(map);
​

回答2:

This isn't working because you are passing the element "map" to your MouseMove function, and using it as both an event object and an element. You can fix this painlessly by using JavaScript to assign your event handler rather than HTML attributes:

<div id="map"></div>

And in your JavaScript:

document.getElementById('map').onmousemove = function (e) {
    // the first parameter (e) is automatically assigned an event object
    var x = e.clientX;
    var y = e.clientY;

    // The context of this is the "map" element
    this.style.backgroundPositionX = x + 'px';
    this.style.backgroundPositionY = y + 'px';
}

http://jsfiddle.net/VRvUB/229/

The downside of this approach is that the backgroundPositionX and backgroundPositionY style properties are not supported in all browsers.

You mention "an absolutely positioned image inside a div" which is probably the more compatible solution for this. To make this setup work, you need to set the position of the outer element to relative, which makes absolute child elements use its bounds as zero.

<div id="map">
    <img src="" alt="">
</div>

CSS:

#map {
    position:relative;
    overflow:hidden;
}

#map img {
    position:absolute;
    left:0;
    top:0;
}

Here it is applied to your code: http://jsfiddle.net/VRvUB/232/

来源：https://stackoverflow.com/questions/13367959/using-mouse-drag-to-control-background-position