可通过 css 过渡拖动的 jQuery UI答案

【问题标题】：jQuery UI draggable with css transition可通过 css 过渡拖动的 jQuery UI
【发布时间】：2015-06-23 09:04:36
【问题描述】：

我正在尝试让 jQueryUI 在我的元素上可拖动：

html:

<div class="draggable"></div>

js:

$('.draggable').draggable();

到目前为止一切正常，但是当我添加 css 材料设计样式时：

.draggable {
  position: absolute;
  width: 100px;
  height: 50px;
  background-color: red;

  -webkit-transition: all 250ms;
  -moz-transition: all 250ms;
  transition: all 250ms;
}

.draggable:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  transform: translateY(-2px);
}

div 元素开始以错误的方式工作 - 它每隔一段时间就会锁定。

这里是 plunker：http://plnkr.co/edit/ovElSXyYHCioitcIcup9?p=preview

【问题讨论】：

标签： css jquery-ui draggable material-design jquery-ui-draggable

【解决方案1】：

感谢汤姆的建议，我找到了解决方案：

var memo;
$('.draggable').draggable({
  start: function() {
    memo = $(this).css('transition');
    $(this).css('transition', 'none');
  },
  stop: function() {
    $(this).css('transition', memo);
  }
});

Plunker：http://plnkr.co/edit/ovElSXyYHCioitcIcup9?p=preview

【讨论】：

【解决方案2】：

我的猜测是它需要起点和终点来进行转换，所以它只在它认为移动完成时才显示。

我知道这不是答案，但我还不能发表评论，抱歉。

【讨论】：