Javascript 使用鼠标拖动控制背景位置

我想使用“鼠标拖动”在框内拖动背景的位置

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>

什么都没有发生，没有错误，没有警告，什么都没有。。。我尝试了很多东西：一个绝对定位的图像在一个div中（你可以猜到为什么它不起作用），一个可拖动的div在一个有背景图像的div中，一个带有拖放功能的表，最后我尝试了这个：

function MouseMove () {    
    e.style.backgroundPositionX = 10 + 'px';    
    e.style.backgroundPositionY = 10 + 'px';    
    e.style.cursor = "move";    
}

这是可行的，但与鼠标位置无关，

pageX

和

pageY

也不起作用

现场演示：

---

注意：无论您的想法是什么，请不要用JQuery编写它，因为您正在将元素“map”传递给

MouseMove

函数，并将其用作事件对象和元素。通过使用JavaScript分配事件处理程序而不是HTML属性，可以轻松解决此问题：

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

这种方法的缺点是

backgroundPositionX

和

backgroundPositionY

样式属性不可用

您提到“div中绝对定位的图像”，这可能是更兼容的解决方案。要使此设置起作用，您需要将外部元素的

位置设置为
相对
，这使得
绝对
子元素使用其边界为零

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

这里它应用于您的代码：
从您的问题中，我了解到您需要帮助实现实际的“拖动”行为。我想不是。总之，以下是我努力的结果：

仅当按下鼠标按钮时，才会进行拖动，并且。。嗯，它的行为就像我想的那样。如果没有，就看小提琴吧=）

以下是希望在此处查看的用户的代码：

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

这100%有效
香草Javascript


document.getElementById（'image'）.onmousemove=function（e）{
var x=e.clientX；
变量y=e.clientY；
this.style.backgroundPositionX=-x+'px'；
this.style.backgroundPositionY=-y+'px'；
this.style.backgroundImage='url(https://i.ibb.co/vhL5kH2/image-14.png)';
}
document.getElementById（'image'）.onmouseleave=function（e）{
this.style.backgroundPositionX=0+'px'；
this.style.backgroundPositionY=0+'px'；
this.style.backgroundImage='url(https://i.ibb.co/Ph9MCB2/template.png)';
}
.container{
最大宽度：670px；
高度：377px；
}
#形象{
最大宽度：670px；
高度：377px；
光标：十字线；
溢出：隐藏；
背景图像：url（'https://i.ibb.co/Ph9MCB2/template.png');
背景重复：无重复；
}
这一款效果更好，所以我会将其标记为正确的，并向上投票，非常感谢JOPLO！感谢您花时间创建一个精彩的编码示例，也感谢您抽出宝贵的时间！干杯，祝你有美好的一天！：）没问题；）做得很开心。好的，干杯！：）如果你需要任何编码为m8的东西，我是css高手！
<div id="map">
    <img src="" alt="">
</div>

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

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

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