1

私はこのコードを持っています：

jQuery：

var mouseDown=false;
var lastPositionX;
var lastPositionY;
var newX;
var newY;
var lastPositionLeft;
var lastPositionTop;
var newLeft;
var newTop;
    $("#insideMap").on("mousedown",function(){
        mouseDown=true;
        lastPositionX=e.pageX;
        lastPositionY=e.pageY;
    });
    $("#insideMap").on("mouseup",function(u){
        mouseDown=false;
    });
    $("#insideMap").on("mouseleave",function(){
        mouseDown=false;
    });
    $("#insideMap").on("mousemove",function(n){
        if (mouseDown){
            mouseDown = true; // mantain the boolean to prevent mouseleave trigger
            newX=n.pageX-lastPositionX;
            newY=n.pageY-lastPositionY;
            lastPositionLeft=$("#insideMap").position().left;
            lastPositionTop=$("#insideMap").position().top;
            newLeft=newX+lastPositionLeft;
            newTop=newY+lastPositionTop;
            $("#insideMap").css({"left":newLeft,"top":newTop});
            lastPositionX=n.pageX;
            lastPositionY=n.pageY;
        }
    });

デモ： http： //jsfiddle.net/SkWeX/3/

しかし、何かがまだ悪いです:(それはうまく機能しません、それはまだ遅れています、あなたはそれで私を助けることができますか？

4

1 に答える 1

3

:)ブラウザが時々あなたの画像（bg）をドラッグしたいので、これを防ぐ必要があります！

jsFiddleデモ

#insideMapこれを要素のCSSに追加するだけです。

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

そして、このコードはあなたが必要とするすべてです：

var mouseDown=false,
    posX   = 0,
    posY   = 0,
    innerX = 0,
    innerY = 0;

$("#insideMap").on("mousedown",function(e){
    innerX = e.pageX - $(this).offset().left;
    innerY = e.pageY - $(this).offset().top;
    mouseDown= true;
}).on("mouseup",function(){
    mouseDown=false;
});

$(document).on("mousemove",function(e){    
    if (mouseDown){
        var m = {  x: e.pageX-innerX,  y: e.pageY-innerY };        
        $('#insideMap').css({ left: m.x, top: m.y });       
    }
});

いくつかの説明：

あなたのコードは、あなたが要素の位置を再計算している登録されたマウスの動き（そして多くあります）で遅い原因です。間違い。

  • クリック変数で要素内のマウスの位置を取得しinnerX、innerX
  • mousemoveではCSS element position、を実際のマウスの位置に移動しますが（右のように推測します）、要素がクリックされた位置（innerX、innerY）を差し引いたものです（要素がマウスの位置にジャンプしないようにするため）。
于 2012-06-24T17:36:23.130 に答える