0

I'm trying to implement pan on a viewport, when the mouse is dragging on the container its element inside should move the problem is every time I start dragging the element resets to its first position.
Also the element inside inherits the event which shouldn't happen because offset change when it's clicked.

http://jsfiddle.net/dML5t/7/

<div id=container>
   <div id=move>
</div>

Javascript:

var obj = {startPositionX:0,startPositionY:0};
var scale=1.0;
var translate = {x:0,y:0};
$('#container').on("mousedown",function(e){
    var container = $(this);
    var move = $('#move');
    console.log($('#container').offset().left, container.offset().top);
    obj.startPositionX=e.offsetX+container.offset().left+20;
    obj.startPositionY=e.offsetY+container.offset().top+30;
    $(document).on("mousemove",function(e){
        console.log("dragging", e.pageX-obj.startPositionX, e.pageY-obj.startPositionY);
        translate.x=e.pageX-obj.startPositionX;
        translate.y=e.pageY-obj.startPositionY;
        $('#move').css('transform','scale('+scale+') translate('+translate.x+'px, '+translate.y+'px)');
    });
});
$(document).on("mouseup",function(){
    $(this).off("mousemove");
});
shuji
  • 7,369
  • 7
  • 34
  • 49
  • 1
    *"Also when start dragging inside the element this moves 20px"* 20px is the same as the top and left value. Remove it and it goes away. If you want it to start at 20,20, use the same translate style that you're using to position it while/after dragging. http://jsfiddle.net/dML5t/5/ – Kevin B Dec 12 '13 at 22:17
  • If i remove it then when I start pan outside the element those 20 are also removed. – shuji Dec 12 '13 at 22:19
  • Right, but you could remove it at the start of the move, then add it back after, adjusting the translate as needed. My point is that's where the jump is coming from, you'll have to compensate for it. – Kevin B Dec 12 '13 at 22:19
  • I can see now, thank you. – shuji Dec 12 '13 at 22:28
  • The problem appears to be related to `obj.startPositionX=e.offsetX`, it's different based on whether the mousedown happens on the container vs move. – Kevin B Dec 12 '13 at 22:46
  • Yes, but how can I stop the element from receiving the event? because it's the opposite to stopPropagation – shuji Dec 12 '13 at 22:48
  • it has to receive the event, otherwise a drag won't start. What exactly do you want to happen if someone starts dragging from a red area rather than the square box? If you want the gray box to move to the mouse, how far on the mouse should it be? should the mouse be in it's center? top left? top right? 20px from top and left? – Kevin B Dec 12 '13 at 22:51
  • I want to move the gray area when someone drag the red area, it's a viewport. but the problem is that the gray always returns to 0,0 when the drag starts. Also the event is inherited to the gray area which I dont know how to stop, that's the offset problem. – shuji Dec 12 '13 at 22:53

1 Answers1

4

Ok, I finally made it:

http://jsfiddle.net/dML5t/8/

var obj = {startPositionX:0,startPositionY:0}; //mouse position
var scale=1.0;
var translate = {x:0,y:0}; //element relative position
$('#container').on("mousedown",function(e){
    var container = $(this);
    var move = $('#move');
    obj.startPositionX=e.pageX-translate.x;
    obj.startPositionY=e.pageY-translate.y;
    $(document).on("mousemove",function(e){
        translate.x=e.pageX-obj.startPositionX;
        translate.y=e.pageY-obj.startPositionY;
        move.css('transform','scale('+scale+') translate('+translate.x+'px, '+translate.y+'px)');
    });
});
$(document).on("mouseup",function(){
    $(this).off("mousemove");
});
shuji
  • 7,369
  • 7
  • 34
  • 49
  • Hi @shuji - I found when the mouse down is not on the image area, I can still pan. Can you correct it? – Ng2-Fun Mar 20 '17 at 01:50
  • @Ng2-Fun ok the target for this script is to move everything inside the read area but to work only inside the gray square you can add the next to mousedown (before calling anything else): `if(e.target!=document.querySelector('#move')) return` – shuji Mar 21 '17 at 02:11