Draggabilly delay on actual movement

[kieronsutton00]

Hello, I am having an issue with Packery and Draggabilly. When I drag an element there is a delay for when the element starts to move. This makes it incredibly difficult to control and the complete opposite of user-friendly. This is an example of what I'm talking about: http://littlefishfx.com/packery-test/

As you can see (if you test it) the delay is very obvious, and it makes it difficult to control the movement of the element.

I have a copy of the page locally, that works great. However, it's just when it's on the wordpress page.

Maybe it could be the theme, or a plugin? Or possibly, it could be jQuery/jQuery-ui itself (even though I'm using the latest wordpress version).

Does anyone know what could be causing this? the local version works great, and it's just the page, nothing else.

Thanks, Kieron

[desandro]

That URL is 404ing. Can you take a look?

[kieronsutton00]

Oh yes, sorry I forgot to take it off private. It should work now.

Thanks

[desandro]

I'm still not able to see the content. Best solution is to make a reduced test case in CodePen in jsfiddle. See submitting issues guidelines

[kieronsutton00]

Apologies, you will be able to see it now.

The reason why I'm not using CodePen is because the code works great in everything but my website. Do you know why my website is making packery/gridster 'lag' when dragging?

Thanks, Kieron

[desandro]

The transition CSS is causing the issue

article *, ul * {
  transition: all .4s ease;
  -webkit-transition: all .4s ease;
}

I recommend you set CSS transitions to only the properties you plan on transitioning OR use a separate element for transition effects, like:

<div class="hub-widget">
  <div class="hub-widget-content"> <!-- for transition effects -->

[kieronsutton00]

Unfortunately, I didn't make this theme, the company had an external web developer create this theme before I joined (I'm just an apprentice web developer).

And this solved my issue.

Thanks, Kieron

[kieronsutton00]

Whilst I already have an issue open, I guess I can just post in the same one rather than opening a new issue.

As you can see in the previous link, the middle/bottom container has widgets, how would I make the two swap rather than go underneath each other?

For example, when I attempt to drag the left onto the right, the right widget gets moved to underneath the left widget (which is now on the right).

I'm not sure on how to do this, I had a play with column width, and row width however that just seemed to add 'spacing' between the individual rows/columns.

Thanks, Kieron

[desandro]

Sorry, Packery's layout logic has items move underneath/on top of one another, rather than horizontally. Packery v1 used to move things everywhere, but then it was hard to figure out where an item would move to. The horizontal movement feature you're asking about was more problematic.