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

Question

我继承了一个 wordpress 网站，正在尽我最大的努力整合新设计师的一些功能。其中之一是拖出面板，用户可以在其中单击一个小图标并左右拖动。我以前从未做过拖动类型的效果，并且有点跌跌撞撞地写了一个我觉得应该有效但无效的小脚本。这是我的脚本。用户应该拖动一个图标，该图标在幕后添加到其父级的 margin-left 属性 div。这应该意味着用户看到将 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>

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

Dragging a panel to reveal a div with jQuery. It's killing me

javascript

css

jquery

margin

draggable