jQuery 可排序动画?

发布于 2024-11-15 18:36:30 字数 609 浏览 3 评论 0原文

我正在构建一个小型 CMS 并第一次使用可排序功能。非常有趣且灵活。我只有一个问题:除了拖动时的动画之外,一切都很好,正如我想要的那样。

如果我不尝试在任何排序事件中使用动画,那很好,并且图块可以很好地捕捉到点中,但我真的很想为此设置动画(很像 iPhone 图标重新排列)。我知道这与 ui.placeholder 和 ui.helper 元素以及更改/排序/等事件之一有关,但我似乎无法完全使其正常工作。

这就是我所在的位置,它的工作原理是,一旦我移动到一个新位置,空出的空间就会以动画方式消失(而不是捕捉),但我似乎无法同时以动画方式显示新空间以显示,并且我的网格基本上会折叠一个图块。

更新:

这是我的基本 html 列表布局和当前我能做到的最好行为的简单摆弄:

我唯一想要的是让未选定的块以动画方式移动到新位置,而不是捕捉。这很奇怪,因为作者认识到您正在拖动的项目需要此选项(init 中的恢复速度选项),但其他项目则不然。我尝试在 ui.helper/ui.placeholder 元素上使用大量显示/隐藏动画组合,并取得了不同程度的成功。我的问题是并没有真正理解这些对象的时间和地点,因此到目前为止动画充其量是不可靠的。

I'm building a small CMS and working with the sortable function for the first time. Pretty interesting and flexible. I'm having only one problem: Everything works great, just as I want, except for the animation while dragging.

If I don't try to use animation in any of the sorting events it's fine and the tiles snap into the spots fine, but I'd really like to animate this (much like an iPhone icon rearrange). I know this has something to do with the ui.placeholder and ui.helper elements and one of the change/sort/etc events, but I can't seem to quite get it working.

Here's where I am, which works in that once I move to a new spot the vacated space animates away (rather than snapping), but I can't seem to simultaneously animate the new space out to show and my grid essentially collapses by one tile.

UPDATE:

Here's a simple fiddle with my basic html list layout and the behaviour currently the best I can make it:

-> jQuery sortable grid

The only thing I want is for the non-selected blocks to animate to their new positions, not snap. It's odd as the authors recognized the need for this option with the item you are dragging (revert speed option in init), but not the rest. I tried using lots of combinations of show/hide animations on the ui.helper/ui.placeholder elements with varying degrees of success. My issue is not really understanding when and where these objects are so the animations have been dodgy at best so far.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

纵性 2024-11-22 18:36:30

聚会已经很晚了,但我刚刚完成了一个实现,其中涉及对当前未在用户拖动时被拖动的可排序对象进行动画处理。我发现关于这个主题的帮助很少,所以我想我会找到一个解决方案。

您可以在这里查看:

带有动画的 jQuery 可排序

Quite late to the party, but I just finished an implementation that involves animating the sortables that aren't currently being dragged as the user drags that one. I found there was very little help on this topic, so I thought I'd get a solution going.

You can check it out here:

jQuery Sortable with animation

岁月蹉跎了容颜 2024-11-22 18:36:30

如果 .sortable() 与相对定位一起使用,特别是与 css 给出的浮动一起使用,通常可能会出现此问题。

其他可以通过分离并行动画来实现的解决方案
jQuery 拖动动画CSS3 转换,因为这是通过相同的技术实现的......但不包括定位。

但是,您需要编写单独的脚本来为元素值设置初始绝对位置,它可以是 JavaScript、初始 css 或 jQuery .css()

//and sure recompose css
//by add
position:absolute  

//and remove
float:left

祝您好运! :)

The problem here in general is possible in case that .sortable() is used with relative positioning especially with the float given by css.

Other solution which can be implemented through parallelize animations by separating
jQuery Dragging Animation and CSS3 Transitions, due to this is realized anyway in the same tech ... with exclusion of positioning.

But then you need to make the separate script to set an initial absolute positions to the elements value, it can be JavaScript, initial css, or jQuery .css()

//and sure recompose css
//by add
position:absolute  

//and remove
float:left

Good Luck! :)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文