Glisser des éléments

Question

Je me demande simplement s'il est possible de faire glisser des images/éléments (que ce soit dans une div ou non) où l'image/l'élément est déplacé vers la gauche et vient du côté droit de l'écran./élément laissé pour obtenir le même résultat, ou vice versa. Comme pour les cartes google (au niveau de zoom 1), l'utilisateur peut faire glisser l'image vers la gauche ou la droite en continu, et ces images sont en boucle continue.

Si oui, quelles langues recommanderiez-vous d'utiliser? javascript?

J'espère que cela a du sens.

Un grand merci

Answer 1

Ceci est certainement possible en utilisant Javascript. Ayez juste deux copies de l'image, et comme vous faites glisser les images à gauche, déplacez la deuxième copie vers la droite. (Ou vice versa si vous glissez à droite).

Answer 2

Vous pouvez ajouter des gestionnaires d'événements à n'importe quel élément, y compris vos images, qui exécutent du code pendant le glissement. Je présente mes excuses pour ne pas fournir une solution complète de travail, je suis pressé, j'espère que cela aide comme point de départ

var myGlobals = { 
    state: { 
    dragging: false; 
    } 
}; 

$('.carouselImg').on('mousedown', function(e){ 
    myGlobals.state.dragging = true; 
}); 

$(window).on('mouseup', function(e){ 
    // stop movement even if mouseup happens somewhere outside the carousel 
    myGlobals.state.dragging = false; 
}); 

$(window).on('mousemove', function(e){ 
    // allow user to drag beyond confines of the carousel 
    if(myGlobals.state.dragging == true){ 
    recalculateCarouselPosition(e); 
    } 
}); 

function recalculateCarouselPosition(e){ 
    // These fun bits are left as an exercise for the reader 
    // the event variable `e` gives you the pixel coordinates where the mouse is 
    // You will have to do some math to determine what you need to do after this drag. 
    // You may want to store the coordinates of the initial click in 
    // `myGlobals.dragStart.x, .y` or similar so you can easily compare them 
    // You will probably set a negative CSS margin-left property on some element 
    // of your carousel. 
    // The carousel will probably have overflow:hidden. 
    // You will also have to manipulate the DOM, by adding a duplicate image to the 
    // opposite end and deleting the duplicates once they have scrolled out of view 

};