jQuery:完成拖动而不触发click事件 [英] jQuery: Finish dragging without triggering click event

问题描述

我正在尝试在以下页面中设置

I am trying to set up the following page where:

1. 如果单击该按钮，则可以看到一个div.
2. 如果单击div，则可以看到下一个div.
3. 如果您移动按钮，则不会出现»click«(期望的行为)

我遇到的问题是，如果您移动div，则会出现下一个div-这不是我想要的.在其上发生拖动事件后，不应显示下一个div".

The problem I am having is that if you move the div, the next div appears - this is not what I want. The "next div" should not be displayed after a drag event finishes on it.

这是我的代码:

$(function() {
  $("#button").draggable({
    stack: 'div',
    containment: "body"
  });
});

$('#button').on('mouseup', function() {
  if (!$(this).hasClass('ui-draggable-dragging')) {
    // click function
    $("#content").toggle();
  }
});

$(function() {
  $("#content").draggable({
    stack: 'div',
    containment: "body"
  });
});

let containers = $('.trip').hide();
let firstContainer = containers.first().show();

containers.on('click', function() {
  //Get current element and next sibling
  let elem = $(this);
  let next = elem.next('.trip');

  //Does sibling exist?
  if (next.length) {
    next.show();
  } else {
    firstContainer.show();
  }
  elem.hide();
});

body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  left: 0;
  top: 0;
  background-color: grey;
}

#button {
  width: 100px;
  height: 100px;
  background-color: cyan;
}

#content {
  display: none;
  cursor: all-scroll;
  top: 10%;
  left: 10%;
  position: absolute;
}

.trip {
  width: 200px;
  height: 200px;
  background-color: blue;
  color: white;
}

<div id="button">Button</div>

<div id="content">
  <div class="trip">div 1</div>
  <div class="trip">div 2</div>
  <div class="trip">div 3</div>
</div>

<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>

有没有办法解决这个问题? :)
(一个可能的问题是，纯JavaScript与jQuery混合使用了)
谢谢

Is there a way to solve this? :)
(a possible problem is also that pure JavaScript is mixed with jQuery)
Thanks

推荐答案

此处要解决的主要问题是，将#content上的常规click事件与在完成过程中也触发的其他点击类似事件"区分开来的元素.

The main problem to solve here is in distinguishing a regular click event on #content, from other "click like events" that are also triggered during completion of the element being dragged.

您当前的代码中有一种可以用来实现所需行为的方法:

You're code currently has a method of doing that which you could re purpose for the desired behaviour:

if (! $(this).hasClass('ui-draggable-dragging')) {
   /* This was a "regular click event"
}

因此，对于您的代码，您可以对其进行如下修改:

So in the case of your code, you could revise it as follows:

$(function() {

  /* Combine on ready logic into one place */

  $("#button").draggable({
    stack: 'div',
    containment: "body"
  });
  
  $("#content").draggable({
    stack: 'div',
    containment: "body"
  });
  
  /* Hide all trip elements except for first */
  $('.trip', '#content').not(':first').hide();
});

$('#button').on('mouseup', function() {
  if (!$(this).hasClass('ui-draggable-dragging')) {
    $("#content").toggle();
  }
});

$('#content').on('mouseup', function() {

  /* Reuse same logic in #button mouseup handler */
  if (!$(this).hasClass('ui-draggable-dragging')) {

      /* 
      If content element if not dragging, treat mouse up as conclusion
      of click event and rotate visibility of trip elements like this
      */
      let trip = $('.trip:visible', '#content');
      let next = trip.next().length === 0 ? 
          $('.trip:first', '#content') : trip.next();
      
      trip.hide();
      next.show(); 
  }
});

body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  left: 0;
  top: 0;
  background-color: grey;
}

#button {
  width: 100px;
  height: 100px;
  background-color: cyan;
}

#content {
  display: none;
  cursor: all-scroll;
  top: 10%;
  left: 10%;
  position: absolute;
}

.trip {
  width: 200px;
  height: 200px;
  background-color: blue;
  color: white;
}

<div id="button">Button</div>

<div id="content">
  <div class="trip">div 1</div>
  <div class="trip">div 2</div>
  <div class="trip">div 3</div>
</div>

<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>

这篇关于jQuery:完成拖动而不触发click事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！