使用鼠标拖动来控制背景位置 [英] 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.

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;

}

html：

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

javascript：

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";

}

没有任何反应，没有错误，没有警告，没有...我尝试了很多东西：一个div里面一个绝对定位的图像（你可以猜到为什么不起作用），一个带有背景图像的div中的一个可拖动的div，一个拖放的桌子，最后我试了这个：

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";

}

这有效，但它与鼠标的位置无关， pageX和pageY也不起作用。

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

现场演示： http://jsfiddle.net/VRvUB/224/

PS：不管你的想法是什么，请不要用JQuery写它

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

干杯！

Mithos

推荐答案

从你的问题我明白你需要帮助实现实际的拖动行为。我猜不会。无论如何，这是我努力的结果： http://jsfiddle.net/joplomacedo/VRvUB/236/

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);
​

这篇关于使用鼠标拖动来控制背景位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！