jQuery UI draggable with css transition

Question

I'm trying to have jQueryUI's draggable on my element:

html:

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

js:

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

Until now everything works ok, but when I add css material design styles:

.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 element starts to work in a wrong way - it is locking every some time.

Here's plunker: http://plnkr.co/edit/ovElSXyYHCioitcIcup9?p=preview

michalv · Accepted Answer · 2015-06-23 09:36:21Z

3

I found solution thanks to Tom suggestion:

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

answered Jun 23, 2015 at 9:36

michalv

3753 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user2730989 · Accepted Answer · 2015-06-23 09:12:14Z

1

My guess is that it needs both the start and end point to do a transition so it is only displayed when it thinks the movement has finished.

I know this isn't an answer but I can't comment yet, sorry.

answered Jun 23, 2015 at 9:12

user2730989

Collectives™ on Stack Overflow

jQuery UI draggable with css transition

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related