0

我有这个代码http://codepen.io/anon/pen/IqAiF

我想在触发拖动事件时停止水果运动，问题是包装所有标签的' 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(){

    }
  });

这个想法是将水果拖到可放置的 div 中，但动画类包含水果类，因此如果您尝试拖动水果，动画必须停止而不停止其中所有元素的动画。

4

1 回答 1

0

这会创建一个漂亮的停止启动行为：

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

有关还原修复的更多信息，请参阅源代码。您需要猴子补丁$(this).data('uiDraggable')._mouseStop才能完全修复它。

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

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

于 2013-09-19T19:05:37.620 回答