0

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

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：

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，一个带有拖放功能的表格，最后我尝试了这个：

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

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

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

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

4

3 回答 3

5

从您的问题中，我了解到您需要帮助来实现实际的“拖动”行为。我猜不会。无论如何，这是我努力的结果：http: //jsfiddle.net/joplomacedo/VRvUB/236/

拖动仅在鼠标按钮时发生，并且......好吧，它的行为就像我认为你可能想要的那样。如果你还没有，就看看小提琴 =)

这是给那些想在这里看到它的人的代码：

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);
​
于 2012-11-13T23:40:02.830 回答
2

这不起作用，因为您将元素“map”传递给您的MouseMove函数，并将其用作 event object 和 element。您可以通过使用 JavaScript 分配事件处理程序而不是 HTML 属性来轻松解决此问题：

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

在你的 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/

这种方法的缺点是并非所有浏览器都支持backgroundPositionX和backgroundPositionY样式属性。

您提到“在 div 中绝对定位的图像”，这可能是更兼容的解决方案。要使此设置正常工作，您需要将position外部元素的 设置为relative，这使得absolute子元素使用其边界为零。

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

CSS：

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

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

在这里它适用于您的代码：http: //jsfiddle.net/VRvUB/232/

于 2012-11-13T20:47:59.760 回答
2

这适用于 100% Vanilla Javascript

document.getElementById('image').onmousemove = function (e) {
    var x = e.clientX;
    var 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 {
   max-width: 670px;
   height: 377px;
}
#image {
   max-width: 670px;
   height: 377px;
   cursor: crosshair;
   overflow: hidden;
   background-image: url('https://i.ibb.co/Ph9MCB2/template.png');
   background-repeat: no-repeat;
}
<div class="container">
     <div id="image">
     </div>
</div>

于 2021-02-25T03:20:04.397 回答