Drag map avec limite

Version imprimable

21/06/2013, 16h24
Hotgeart

Drag map avec limite

Bonjour,

Je cherche a faire un drag d'une carte un peu comme Google map.

Cependant, quand ma div est plus grande que son parent ça bug.

Bug : http://jsfiddle.net/vM33R/

Work : http://jsfiddle.net/zjQnp/

Comme vous le voyez pour le premier il saute et pour le deuxième je n'ai aucun soucis. Et si vous retirez le "containment: ".map"" du premier ça marche, mais le drag n'a pas de limite.

Avez-vous une idée :? ?

Merci
21/06/2013, 16h29
SpaceFrog

as tu vu ce post là ?

http://www.developpez.net/forums/d10...e-google-maps/
22/06/2013, 19h30
Hotgeart

Non je n'avais pas vu merci. Ça me servira peut être en dernier recours.

Mais j'aimerai si possible y arriver avec draggable();.

Donc si quelqu'un a une idée.

Merci
24/06/2013, 09h24
SpaceFrog

draggable possède un argument "containment:"
24/06/2013, 11h51
Hotgeart

Oui j'utilise containment, mais comme tu le vois dans le Fiddle ça saute de coin en coin et je ne peux pas drag aisément
24/06/2013, 12h01
SpaceFrog

http://jsfiddle.net/vM33R/1/

reste à fixer les limites du deplacement

Ça aussi c'était dans mon premier post.

_________________
J'ai trouvé la solution.

Pour ceux que ça intéresse :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
$(function() {
    var ox     = $(".map").parent().offset().left;
    var oy     = $(".map").parent().offset().top;
 
    // combien de x PX à le border du parent?
    var border = 1;
 
    //drag
    $(".map").draggable({
        containment: [
            -($('.map').width()-$('.map-container').width()-border) + ox,
            -($('.map').height()-$('.map-container').height()-border) +oy,
            ox,
            oy
        ],
        scroll: false
    });
});

24/06/2013, 16h49
SpaceFrog

Merci d'avoir partagé la solution

mise en application http://jsfiddle.net/vM33R/2/