Faire glisser un panneau pour révéler une div avec jQuery. Il me tue

Question

J'ai hérité d'un site wordpress et je fais de mon mieux pour intégrer certaines fonctionnalités d'un nouveau designer. L'un d'eux est un panneau de glisser-déposer où l'utilisateur clique sur une petite icône et traîne à gauche et à droite. Je n'ai jamais fait un effet de type dragging avant et j'ai trébuché sur l'écriture d'un petit script qui me semble devoir marcher, mais pas. Voici mon script. L'utilisateur est supposé faire glisser une icône qui, derrière les scènes, ajoute à l'attribut margin-left de son div parent. Ceci est censé signifier que l'utilisateur voit l'effet de faire glisser le div en vue. Au début de la div est poussé hors de l'écran ma marge gauche de -1100px .:

var dragging = false; 
    var start; 

    $(document).on('mousedown', function(e){ 
     if ($(e.target).is('.dragme')) { 
      dragging = true; 
      start = 0 - e.pageX; 
     } 
    }); 

    $(document).on('mouseup', function(){ 
     dragging = false; 
     start = 0; 
    }); 

    const offset = $('.dragme').offset().left; 

    $(document).on('mousemove', function(e){ 
     if (!dragging) { 
      return; 
     } 

     else { 
      let move = start + e.pageX; 
      let margin = parseInt($('#section4 .overlay').css('margin-left').replace(/[^-\d\.]/g, '')); 
      $('#section4 .overlay').css('margin-left', (margin + move) + 'px'); 
     } 
    }); 

et mon image dragme css:

.dragme { 
    cursor: move; 
    position: absolute; 
    right: 0; 
    top: 50%; 
    z-index: 20000; 
    transform: translateY(-50%); 
} 

En ce moment, mon code permet à l'utilisateur de cliquer sur sur l'image et faites glisser mais vous ne pouvez pas voir l'effet en cours, donc vous ne verrez pas le repositionnement div jusqu'à ce qu'ils lâchent. De plus, l'événement mouseup ne se déclenche pas, donc après que l'utilisateur fait glisser et déplace à nouveau la souris, le div devient complètement fou parce que le glisser est toujours vrai. Des idées de ce que je fais mal? Aussi, s'il vous plaît ne recommande pas d'utiliser jQuery draggable ou une autre bibliothèque. Je ne veux pas ajouter plus de ballonnement à ce site.

Answer 1

Je ne suis pas sûr où est l'erreur dans votre code, mais de toute façon utiliser mon Codepen.

$(function() { 
 
    
 
    var $win = $(window), 
 
     $overlay = $('.overlay'), 
 
     dragging = false, 
 
     start = 0, 
 
     defaultMargin = +$overlay.css('margin-left').replace(/[^-\d\.]/g, ''); 
 
    
 
    $win.on('mousedown', function(e) { 
 
     if ($(e.target).is('.dragme')) { 
 
     dragging = true; 
 
     start = e.pageX; 
 
     } 
 
    }); 
 
    
 
    $win.on('mouseup', function(e) { 
 
     dragging = false; 
 
     start = e.pageX; 
 
     defaultMargin = +$overlay.css('margin-left').replace(/[^-\d\.]/g, ''); 
 
    }); 
 
    
 
    $win.on('mousemove', function(e) { 
 
     if(!dragging) return false; 
 
     var move = e.pageX - start; 
 
     $overlay.css({marginLeft: defaultMargin + move + 'px'}); 
 
    }); 
 
});

.overlay { 
 
    position: absolute; 
 
    width: 90%; 
 
    height: 100px; 
 
    margin-left: -200px; 
 
    background-color: green; 
 
} 
 

 
.dragme { 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: yellow; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="overlay"> 
 
    <div class="dragme"></div> 
 
</div>