Question

我想在触发拖动事件时停止水果移动，问题是“animation”类包装所有<li>标记。

任何想法？。

<ul>
  <li  class="x1">
    <div class="animation">
    <div class="fruit"></div>
    <span class="ant"></span>
    <span class="ant"></span>
    <span class="ant"></span>
    <span class="ant"></span>
    </div>
  </li>
</ul>

...

$('.fruit').draggable({
    revert: true,
    cursor: 'move',
    drag: function(){   
    },
    stop: function(){

    }
  });

这个想法是将水果拖动到一个droppable div中，但是动画类将包含水果类，所以如果你试图拖动水果，动画必须停止而不停止其内部所有元素的动画。 / p>

Answer 1

这会产生一种漂亮的停止 - 启动行为：

$('.fruit').draggable({
  revert: true,
  cursor: 'move',
  start: function(){
    $(this).parent().css('-webkit-animation-play-state', 'paused');
  },
  drag: function(){},
  stop: function(){
    $(this).parent().css('-webkit-animation-play-state', 'running');
  }
}

这将完全符合您的要求：

  $('.fruit').draggable({
    revert: true,
    cursor: 'move',
    helper: 'clone',
    appendto: document.body,
    start: function(e, ui){
      // don't use `display:none` so getting the position still works.
      $(this).css('opacity', '0');
    },
    drag: function(e, ui){
      // this could be improved. this is so that the revert works somewhat properly.
      var position = $(this).position();
      ui.originalposition.top = position.top;
      ui.originalposition.left = position.left;
    },
    stop: function(){
      $(this).css('opacity', '1');
    }
  });

有关还原修复的详细信息，请参阅the source。您需要使用补丁$(this).data('uiDraggable')._mouseStop来完全修复它。

http://codepen.io/anon/pen/GaIuy

请注意，肯定有其他技术可以做到这一点;我使用了这个，因为它充分利用了jQuery UI提供的工具。

在拖动事件上停止动画

1 个答案: