jQuery:完成拖动而无需触发点击事件

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

如果您单击按钮，则可以看到DIV。
如果您单击DIV，则可以看到下一个Div。
如果您移动按钮，则没有»单击«(所需的行为(

我遇到的问题是，如果您移动DIV，则下一个DIV出现 - 这不是我想要的。拖动事件结束后不应显示"下一个div"。

这是我的代码：

$(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混合(
谢谢

在这里要解决的主要问题是区分#content上的常规click事件与其他"单击类似事件"，这些事件在拖动的元素完成期间也会触发。

您当前的代码有一种方法，您可以将其目的用于所需的行为：

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

因此，在代码的情况下，您可以按以下方式进行修改：

$(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>

实际上，您需要的只是可读的代码，

将类.draggable分配给所有可拖动元素
将新类用作stack: '.draggable'
注册单击您的'#container'，而不是您的.trip元素
仅使用一个事件，即"click"一个：
隐藏所有.trip，但首先使用CSS .trip~.trip {display:none;}

jQuery( $ => {
  const $cont = $('#content');
  const $bttn = $('#button');
  const $trip = $('.trip');
  const tripL = $trip.length;
  let   i = 0;
  $('.draggable').draggable({stack:'div', containment:'body'});
  
  $bttn.on('click', function() {
    if (!$(this).hasClass('ui-draggable-dragging')) $cont.toggle();
  });
  $cont.on('click', function() {
    $trip.eq(++i % tripL).show().siblings($trip).hide();
  });
});

html, body { height:100%; margin:0;}
body {
  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;
}
.trip ~ .trip {display: none;}

<!-- PS: Add class="draggable" to draggable elements -->
<div id="button" class="draggable">Button</div>
<div id="content" class="draggable">
  <div class="trip" id="a">div 1</div>
  <div class="trip" id="b">div 2</div>
  <div class="trip" id="c">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>

编辑

有关更多内容，请参阅此答案：https：//stackoverflow.com/a/57351517/383904

相关内容

最新更新

热门标签：