使用 jQuery 拖动面板以显示 div。这太痛苦了

Question

我继承了一个 wordpress 网站，并正在尽我所能整合新设计师的一些功能。其中之一是一个拖出面板，用户点击一个小图标并左右拖动。我以前从未做过拖动类型的效果，并且有点偶然地写了一个我觉得应该可以工作的小脚本，但没有。这是我的脚本。用户应该拖动一个图标，该图标在幕后添加到其父 div 的 margin-left 属性中。这应该意味着用户看到了将 div 拖到视图中的效果。开始时，div 被推离屏幕，左侧边距为 -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');
        }
    });

还有我的 Dragme 图片 css：

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

现在我的代码允许用户单击图像并拖动，但您看不到效果发生，因此在他们松开之前您不会看到 div 重新定位。此外，mouseup 事件没有触发，因此在用户再次拖动并移动鼠标后，div 变得非常疯狂，因为拖动仍然是真的。任何想法我做错了什么？另外，请不要推荐我使用 jQuery draggable 或其他一些库。我不想再给这个网站增加任何臃肿。

Answer 1

我不确定您的代码哪里出错了，但无论如何请使用我的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>