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');
        }
    });

和我的拖拉图片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>

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

1 个答案: