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

要素「マップ」を関数に渡し、MouseMoveそれをイベント オブジェクトと要素の両方として使用しているため、これは機能しません。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 に答える